Directive

Íme 3 gyakori és valós Angular-fejlesztési eset, amikor custom direktíva írása indokolt:

---

1. 🔁 Viselkedés újrafelhasználása több komponensben

Pl. automatikus fókusz mezőre lépéskor

@Directive({
  selector: '[appAutoFocus]'
})
export class AutoFocusDirective implements AfterViewInit {
  constructor(private el: ElementRef) {}
  ngAfterViewInit() {
    this.el.nativeElement.focus();
  }
}

Használat:

<input type="text" appAutoFocus />

🟢 Miért jó? Nem kell minden inputnál setTimeout(() => input.focus())-t írni.

---

2. 🎨 Dinamikus stílus vagy osztály logika elválasztása

Pl. ha egy osztály csak egy feltétel alapján kerülhet rá, és ezt több helyen kell megtenni.

@Directive({
  selector: '[appHighlightIf]'
})
export class HighlightIfDirective {
  @Input('appHighlightIf') set condition(val: boolean) {
    if (val) {
      this.el.nativeElement.classList.add('highlight');
    } else {
      this.el.nativeElement.classList.remove('highlight');
    }
  }
  constructor(private el: ElementRef) {}
}

Használat:

<div [appHighlightIf]="isImportant">Fontos üzenet</div>

🟢 Ezáltal logika + UI szeparáltan kezelhető.

---

3. 🧠 **Egyéni strukturális direktíva (pl. ngIf, ngFor mintájára)

Pl. csak akkor jelenjen meg az elem, ha mobil eszköz van.

@Directive({
  selector: '[appIfMobile]'
})
export class IfMobileDirective {
  constructor(
    private tpl: TemplateRef<any>,
    private vc: ViewContainerRef
  ) {
    const isMobile = window.innerWidth < 768;
    if (isMobile) {
      this.vc.createEmbeddedView(this.tpl);
    }
  }
}

Használat:

<div *appIfMobile>Ez csak mobilon jelenik meg</div>

🟢 Jó példa strukturális (csillagos) direktívára.

---

🧩 Összefoglalva

Eset	Cél	Típus
Autofókusz mező	UI viselkedés	Attribútum direktíva
Feltételes stílus	Osztály hozzáadása	Attribútum direktíva
Mobil-only megjelenítés	DOM manipuláció	Strukturális 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'">