کامپوننت ها (Components)

کامپوننت (Component) مثل قطعه لگو است. هر کامپوننت یک نما کنترل می کند. بنابراین برنامه را به تکه های قابل استفاده دوباره تقسیم می کنیم.

اجزای اصلی کامپوننت

دکوراتور @Component همه چیز را کنار هم می آورد؛ سلکتور، قالب، استایل، منطق. سپس با تگ سلکتور در قالب والد استفاده می کنی.

import { Component } from '@angular/core';

@Component({
  selector: 'hello-comp',
  standalone: true,
  imports: [],
  styles: [`:host { display: block; }`],
  template: `<p>Hello!</p>`
})
export class HelloComponent {}

مشاهده در ادیتور

ورودی ها با @Input()

ورودی (Input) یعنی داده از والد به فرزند برود. مثل برگه نمره که از دفتر مدرسه به کلاس می آید.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello-comp',
  standalone: true,
  template: `<p>Hello {{ name }} from child!</p>`
})
export class HelloComponent {
  @Input() name: string = '';
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HelloComponent],
  template: `
    <h3>Parent Component</h3>
    <hello-comp [name]=\"user\"></hello-comp>
  `
})
export class App {
  user: string = 'Angular';
}

bootstrapApplication(App);

مشاهده در ادیتور

خروجی ها با @Output()

خروجی (Output) یعنی فرزند به والد خبر بدهد. مثل زنگ پایان کلاس که همه را مطلع می کند.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'counter-button',
  standalone: true,
  template: `
    <button (click)=\"inc()\">Clicked {{ count }} times</button>
  `
})
export class CounterButton {
  @Input() step: number = 1;
  @Output() clicked = new EventEmitter<number>();
  count: number = 0;
  inc(): void {
    this.count += this.step;
    this.clicked.emit(this.count);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CounterButton],
  template: `
    <h3>Component Output</h3>
    <counter-button [step]=\"2\" (clicked)=\"onChildClicked($event)\"></counter-button>
    <p>Parent received: {{ lastCount }}</p>
  `
})
export class App {
  lastCount: number = 0;
  onChildClicked(n: number): void {
    this.lastCount = n;
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

پروجکشن محتوا با <ng-content>

پروجکشن محتوا (Content Projection) یعنی والد محتوا بدهد و فرزند نمایش دهد. مثل قاب عکس که عکس دلخواه می گذاری.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'w3-card',
  standalone: true,
  styles: [`
    .card { border: 1px solid #ccc; border-radius: 8px; padding: 12px; max-width: 360px; }
    .card-header { font-weight: 600; margin-bottom: 6px; }
    .card-body { color: #333; }
  `],
  template: `
    <div class=\"card\">
      <div class=\"card-header\"><ng-content select=\"[card-title]\"></ng-content></div>
      <div class=\"card-body\"><ng-content></ng-content></div>
    </div>
  `
})
export class CardComponent {}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardComponent],
  template: `
    <h3>Content Projection (ng-content)</h3>
    <w3-card>
      <span card-title>Welcome</span>
      <p>Reusable shell with projected content.</p>
    </w3-card>
  `
})
export class App {}

bootstrapApplication(App);

مشاهده در ادیتور