Angular - ziua 3

Directiva:

- de atribute: afecteaza un singur element, cel pe care este pus

- structurale: afecteaza mai multe elemente din DOM, contine * (exemplu *ngIf, *ngFor) - o singura directiva structurala are voie sa existe pe un element

Exemplu in TypeScript:

@Directive({

    selector: '[appBasicHighlight]' // va fi recunoscut si fara paranteze patrate, ca un atribut

})

export class BasicHighlightDirective implements OnInit{

    constructor(private elementRef: ElementRef) {}

    ngOnInit(private elementRef: ElementRef) {

        this.elementRef.nativeElement.style.backgroundColor = 'green'; // setare stil

    }

}

- se adauga in app.module.ts -> declarations, numele BasicHighlightDirective

- utilizarea in Html: <p appBasicHighlight></p>

Renderer - o abordare mai buna pentru accesul la DOM, detalii despre api-ul Renderer2 aici

@Directive({

    selector: '[appBetterHighlight]'

})

export class BetterHighlightDirective implements OnInit{

    constructor(private elementRef: ElementRef, private renderer: Renderer2) {}

    ngOnInit() {

        this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'blue');

    }

}

<p appBetterHighlight></p>

HostListener

@HostListener('mouseenter')  mouseover (eventData: Event){

     this.renderer.setStyle(...);

}

@HostListener('mouseleave')  mouseleave (eventData: Event){

     this.renderer.setStyle(...);

}

Alias-urile de la @HostListener sunt standard, specifica trigger-ul.

HostBinding - pentru scurtarea accesului la proprietati

@HostBinding('style.backgroundColor') backgroundColor: string; // alias-ul specifica proprietatea elementului (locatia din DOM)

@HostListener('mouseenter')  mouseover (eventData: Event){

     this.backgroundColor = 'blue'; // => se acceseaza mai usor stilul

}

Directiva ngSwitch

<div [ngSwitch]="value">

    <p *ngSwitchCase="5">Value is 5</p>

    <p *ngSwitchCase="10">Value is 10</p>

    <p *ngSwitchDefault>Value is default</p>

</div>

Serviciile - o clasa in Typescript, fara directive 

In componenta unde vrei sa folosesti un serviciu, se adauga tipul in @Component -> providers. Apoi serviciul trebuie injectat in constructor (nu se instantiaza): constructor(private service: MyService) {}

Instanta salvata din constructor va putea fi folosita oriunde in restul codului din acel ts.

Injectie la nivel de:

- AppModule: serviciul e vizibil in intreaga aplicatie. Se adauga in providers.

- AppComponent: serviciul e vizibil in toate componentele (dar nu in alte servicii)

- alta componenta: serviciul e vizibil in acea componenta si in toti copiii ei

@Injectable() - se adauga intr-un serviciu in care se poate injecta alt serviciu (cand te astepti sa se injecteze ceva).