Direktíva

Lehetővé teszi a DOM manipulálását, az alkalmazás felhasználói felületének módosítását és viselkedésének vezérlését.

Strukturális Direktívák

Ezek a direktívák a DOM szerkezetének megváltoztatásáért felelősek. Például, hozzáadhatnak, eltávolíthatnak vagy cserélhetnek elemeket a DOM-ban.

• *ngIf: Egy feltételes direktíva, amely megjeleníti vagy elrejti a DOM elemet a megadott kifejezés igazságértékétől függően.
• *ngFor: Egy ciklus direktíva, amely lehetővé teszi egy adatsor iterációját és minden elemhez egy DOM elem létrehozását.
• *ngSwitch, *ngSwitchCase, *ngSwitchDefault: Ezek kombinálva hasonlóan működnek, mint a JavaScript switch utasítás, lehetővé téve az elemek megjelenítését különböző feltételek alapján.

Attribútum Direktívák

Ezek a direktívák a DOM elemek kinézetét, viselkedését és tulajdonságait módosítják, de nem változtatják meg a DOM szerkezetét.

• ngClass: Lehetővé teszi a CSS osztályok dinamikus hozzáadását vagy eltávolítását egy elemről.
• ngStyle: Dinamikusan módosítja az elem inline stílusait.
• ngModel: Kétirányú adatkötést biztosít, általában űrlapokban használatos.

Egyéni direktívák

Convert string to uppercase

Directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[appInputFormat]'
})
export class InputFormatDirective {
  @Input('format') format;

  constructor(private el: ElementRef) { }

  @HostListener('blur') onBlur(){
    let value: string = this.el.nativeElement.value;

    if(this.format == 'lowercase')
      this.el.nativeElement.value = value.toLowerCase();
    else
      this.el.nativeElement.value = value.toUpperCase();

  }
}

HTML

<input type="text" appInputFormat [format]="'uppercase'">