Angular - ziua 2

Doua moduri de a prelua un string:

- string interpolation: <img src="{{recipe.imagePath}}"/>

- property binding: <img [src]="recipe.imagePath"/>

Scurtatura pentru un constructor clasic intr-un fisier typescript:

export class Ingredient {
    // fara declararea campurilor

    constructor(public name: string, public amount: number) {
        // fara body
    }
}

Augury: plugin de la Chrome pentru debug si analiza aplicatiei Angular

Decoratori:

- pentru clase

- pentru campuri - cu scopul de a expune proprietatile in exterior: @Input('alias') name: string;

Comunicatia intre componente:

- @Input - semnaleaza ca variabila din ts provine din afara, de la parinte. Parintele o trimite din html folosind paranteze patrate: <app-recipe-item [recipe]="recipeElem"></app-recipe-item>
- @Output - variabila va putea fi vazuta de catre parinte, in html, pe referinta catre copil, parintele o primeste in html folosind parantezele rotunde: <app-shopping-edit (ingredientAdded)="onIngredientAdded($event)"></app-shopping-edit> - aici ingredientAdded face parte din componenta-copil unde este un @Output si un EventEmitter (corelat cu $event)
!!! Trimitere: paranteze patrate; Primire: paranteze rotunde !!!

- prin servicii, cand solutia de mai sus nu este eficienta
Tipul de date EventEmitter: de multe ori (sau intotdeauna?) este un @Output. In ts la o anumita actiune (onSomething()) va apela pe el insusi metoda emit().

Encapsulation: un atribut adaugat la @Component, cu 3 valori posibile:

- ViewEncapsulation.None - te scapa de atribute in plus adaugat automat elementelor - ceea ce adaugi de acum inainte in fisierul css va fi aplicat la nivel global

- ViewEncapsulation.Native - acelasi efect ca si None, dar folosind Shadow mode technology, nu toate browser-ele o suporta

- ViewEncapsulation.Emulated (default)

Local reference: in html, pe un tag, se asigneaza un fel de id la intreg tag-ul: <input type="text" #myid>

Acesta poate fi referentiat mai tarziu in html, pe evenimente: <button (click)="onAdd(myid)">

In metoda onAdd(object) din Typescript, se va primi intreg obiectul de tag.

@ViewChild: @ViewChild('serverContentInput', {static: true}) serverContentInput: ElementRef;

Se adauga {static: true} doar daca se doreste accesarea elementului selectat, in ngOnInit().
Se foloseste atunci cand se face legatura intre html si ts: pe tag-ul din html se adauga "#id", iar in ts se referentiaza prin: @ViewChild('id', {static : false}) idRef: ElementRef;

@ContentChild: cand se foloseste ng-content

Metode trigger:
- ngOnInit() - apelata la initializarea unei componente, se executa dupa constructor -> clasa trebuie sa aiba implements OnInit
- ngOnChanges(changes: SimpleChanges) - cand pe o proprietate care are @Input se petrece o schimbare -> implements OnChanges
Ordinea de rulare pana acum este: constructor, ngOnChanges, ngOnInit.
- ngDoCheck() - ruleaza la orice schimbare in interiorul unei componente cand Angular trebuie sa re-randeze template-ul (proprietati, evenimente, etc). Performanta e ok totusi.
- ngAfterContentInit() - chemata dupa ce un ng-content a fost proiectat intr-un view
- ngAfterContentChecked() - chemata dupa ce un change detector a verificat un ng-content
- ngAfterViewInit() - dupa ce view-ul componentei a fost initializat, ai acces la elementele din DOM
- ngOnDestroy() - chemata inainte sa fie distrusa componenta