Jassif Team Institution

Angular Directives

Directives existing elements மற்றும் components-க்கு behavior add செய்கின்றன.

*ngIf="condition"
*ngFor="let item of items"
@Directive({ selector: '[w3Highlight]' })
<div w3Highlight></div>

Basic Directives

*ngIf ஒரு நிபந்தனையின் அடிப்படையில் உள்ளடக்கத்தை காட்டுகிறது/மறைக்கிறது.

*ngFor ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு தொகுதியை மீண்டும் செய்கிறது.

பட்டியலை add/remove செய்ய ஒரு கொடியை toggle செய்யவும்; உருப்படிகளை *ngFor உடன் render செய்யவும்.

<p *ngIf="items.length > 0">We have {{ items.length }} items</p>
<li *ngFor="let item of items">{{ item }}</li>

Example

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Directives</h3>
    <p *ngIf="items.length > 0">We have {{ items.length }} items</p>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
    <button (click)="toggle()">Toggle Items</button>
  `
})
export class App {
  show = true;
  get items() { return this.show ? ['Angular', 'Components', 'Directives'] : []; }
  toggle() { this.show = !this.show; }
}

bootstrapApplication(App);

ngIf with else

Else உடன் *ngIf-ஐ ஒரு fallback வார்ப்புருவை சுட்டிக்காட்டவும்.

இரண்டு கிளைகளையும் வெளிப்படையாக உருவாக்க then/else தொடரியலைப் பயன்படுத்தவும்.

Angular DOM தொகுதிகளை முழுவதுமாக add/remove செய்கிறது.

<ng-container *ngIf="loggedIn; else loggedOut"></ng-container>
<ng-template #loggedOut>...</ng-template>

<ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>

Example

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>ngIf with else</h3>

    <button (click)="loggedIn = !loggedIn">
      {{ loggedIn ? 'Log out' : 'Log in' }}
    </button>

    <ng-container *ngIf="loggedIn; else loggedOut">
      <p>Welcome back, {{ user }}!</p>
    </ng-container>

    <ng-template #loggedOut>
      <p>Please log in to continue.</p>
    </ng-template>

    <hr>

    <h4>ngIf then/else syntax</h4>
    <button (click)="hasAccess = !hasAccess">
      Toggle Access ({{ hasAccess ? 'granted' : 'denied' }})
    </button>

    <ng-container *ngIf="hasAccess; then accessTpl; else noAccessTpl"></ng-container>

    <ng-template #accessTpl>
      <p style="color: seagreen">Access granted.</p>
    </ng-template>
    <ng-template #noAccessTpl>
      <p style="color: crimson">Access denied.</p>
    </ng-template>
  `
})
export class App {
  loggedIn = false;
  user = 'Angular User';
  hasAccess = true;
}

bootstrapApplication(App);

Attribute Directive (hover highlight)

ஒரு இருக்கும் உறுப்பில் இயங்குகிறது (DOM created/destroyed இல்லை).

தோற்றம் அல்லது நடத்தையை மாற்றுகிறது (எ.கா., styles, classes, attributes add செய்கிறது).

எடுத்துக்காட்டு hover-ல் background set செய்ய @HostBinding மற்றும் @HostListener பயன்படுத்துகிறது.

@Directive({ selector: '[w3Highlight]' })
<div [w3Highlight]="'lightyellow'">Hover me</div>

Example

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Directive, Input, HostBinding, HostListener } from '@angular/core';
import { CommonModule } from '@angular/common';

@Directive({
  selector: '[w3Highlight]',
  standalone: true
})
export class HighlightDirective {
  @Input('w3Highlight') highlightColor = 'lightyellow';
  @HostBinding('style.transition') transition = 'background-color 150ms ease-in-out';
  @HostBinding('style.backgroundColor') bg = '';

  @HostListener('mouseenter') onEnter() { this.bg = this.highlightColor; }
  @HostListener('mouseleave') onLeave() { this.bg = ''; }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, HighlightDirective],
  styles: [`
    .box { padding: 10px; border: 1px dashed #bbb; border-radius: 6px; }
  `],
  template: `
    <h3>Attribute Directive (highlight)</h3>
    <p>Hover the first box to see the effect:</p>
    <div class="box" [w3Highlight]="'lightyellow'">I get highlighted on hover</div>
    <div class="box" style="margin-top:8px">I do not</div>
  `
})
export class App {}

bootstrapApplication(App);

Exercise