Jassif Team Institution

Angular Components

Components என்பது Angular apps-ன் building blocks ஆகும். ஒவ்வொரு component ஒரு view (அதன் template)-ஐ control செய்கிறது.

@Component({ selector: 'hello-comp' })
<hello-comp></hello-comp>

Anatomy of a Component

Selector: Templates-ல் நீங்கள் வைக்கும் tag (e.g., <app-root>).

Template and styles: Inline அல்லது external files.

Standalone: standalone: true set செய்யவும் மற்றும் imports-ல் dependencies import செய்யவும்.

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

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

Component Input

Parent-லிருந்து child-க்கு data pass செய்ய @Input() பயன்படுத்தவும்.

Parent template-லிருந்து [prop] உடன் bind செய்யவும் (e.g., [name]="parentValue").

One-way flow: parent → child.

Defaults வழங்கவும் மற்றும் predictable templates-க்கு clear types வழங்கவும்.

@Input() name: string;
<hello-comp [name]="parentValue"></hello-comp>

Example

@Input() உடன் parent-லிருந்து child-க்கு data pass செய்யவும் மற்றும் [prop] உடன் bind செய்யவும்:

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 = '';
}

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

bootstrapApplication(App);

Component Output

Events-ல் parent-க்கு notify செய்ய @Output() பயன்படுத்தவும்.

EventEmitter<T> மூலம் emit செய்யவும்; parent (event)="handler($event)" உடன் listen செய்கிறது.

Simple, well-typed payloads send செய்யவும்.

@Output() saved = new EventEmitter<number>();
<child-comp (saved)="onSaved($event)"></child-comp>

Example

Child-லிருந்து events emit செய்ய @Output() பயன்படுத்தவும் மற்றும் parent-ல் listen செய்யவும்:

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 = 1;
  @Output()
  /** @type {import('@angular/core').EventEmitter<number>} */
  clicked = new EventEmitter();
  count = 0;
  inc() {
    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 = 0;
  /** @param {number} n */
  onChildClicked(n) {
    this.lastCount = n;
  }
}

bootstrapApplication(App);

Content Projection

Child component-ல் parent-provided content render செய்யவும்.

Insertion points-ஐ <ng-content> உடன் mark செய்யவும்.

Specific slots target செய்ய select பயன்படுத்தவும் (e.g., title vs body).

<ng-content></ng-content>
<ng-content select="[card-title]"></ng-content>

Example

Parent content-ஐ child component-ல் <ng-content> slots உடன் project செய்யவும்:

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>Project any markup into a reusable shell component.</p>
    </w3-card>

    <br>

    <w3-card>
      <span card-title>Another Card</span>
      <ul>
        <li>Works with lists</li>
        <li>Images, buttons, etc.</li>
      </ul>
    </w3-card>
  `
})
export class App {}

bootstrapApplication(App);

Lifecycle Hooks

Initialization: Bindings resolved ஆக தேவைப்படும் setup-க்கு ngOnInit பயன்படுத்தவும்.

Teardown: Timers/subscriptions clean up செய்ய ngOnDestroy பயன்படுத்தவும்.

Other hooks include ngOnChanges, ngAfterViewInit, etc.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({ selector: 'demo', standalone: true, template: `<p>Lifecycle</p>` })
export class Demo implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() {
    this.intervalId = setInterval(() => {/* ... */}, 1000);
  }
  ngOnDestroy() {
    clearInterval(this.intervalId);
  }
}

Exercise