FSGeek
Manipulowanie widokiem to jedna z głównych funkcji wszystkich frameworków SPA. W zależności od warunków i stanu aplikacji musimy wyświetlić inną rzecz dla admina, inną dla moderatora a zupełnie inną gościowi, który dopiero co trafił na naszą stronę. W Angularze do warunkowania widoczności niektórych elementów służą dyrektywny strukturalne: *ngIf i *ngSwitch oraz atrybut hidden o których dziś chwilę powiem.
*NgIf
*NgIf jest prostą dyrektywą strukturalną, która w zależności od wartości umieszcza lub usuwa dany element w drzewie DOM. Wykorzystujemy go w następujący sposób:
<div *ngIf="warunek"></div>
<nazwaKomponentu *ngIf="warunek"></nazwaKomponentu>Jak widać można go zastosować do każdego elementu HTML oraz stworzonego przez nas komponentu. Żeby sterować wyświetlaniem możemy podać zmienną typu Boolean lub wyrażenie, które w rezultacie da taka wartość
<div *ngIf="zmienna"></div>
<div *ngIf="zmienna === 'wartość'"></div>Jest to bardzo przydatne, ponieważ dzięki temu jesteśmy w stanie ukryć przed użytkownikiem pewne elementy interfejsu, których nie powinien widzieć. Częściej jednak chcemy coś zamiast tego wyświetlić np.: jak użytkownik nie jest zalogowany to chcemy mu pokazać przyciski do logowania/rejestracji a jeśli już jest zalogowany to przycisk do edycji profilu. Możemy uzyskać taki efekt na dwa sposoby. Pierwszy to dwukrotne wykorzystanie dyrektywny *ngIf
<div *ngIf="zmienna">wartość dla admina</div>
<div *ngIf="!zmienna">wartość dla gościa</div>Jednak takie coś nie jest zbyt estetyczne i może prowadzić do niepotrzebnych błędów przy późniejszej edycji kodu np.: zmiany nazwy zmiennej. Dużo lepiej wykorzystać konstrukcję if-else znaną z tradycyjnych języków programowania:
<div *ngIf="zmienna; else guest">wartość dla admina</div>
<ng-template #guest><div>wartość dla gościa</div></ng-template>Taki kod jest już dużo bardziej poukładany i nawet przyszła edycja nie będzie problematyczna
Czym jest ta gwiazdka?
Jak zauważyliście przed dyrektywą NgIf umieszcza się gwiazdkę *. Jest to tylko tzw.: syntactic sugar, który na uprościć kod i ułatwić życie nam programistom. Nie jest ona wymagana i możemy ją pominąć ale wtedy musimy inaczej ułożyć nasze elementy oraz wykorzystać ng-template
<ng-template [ngIf]="visible"><div>Jestem widoczny</div></ng-template>Hidden
Do ukrycia elementu możemy także wykorzystać atrybut [hidden] lub [style.display]="'none'". Trzeba tylko pamiętać, że wtedy element jest ukrywany ale ciągle istnieje w drzewie DOM. Jeśli jest to nasz komponent to ciągle może odbierać i wysyłać eventy. Element taki powstaje w momencie jak jest tworzone całe drzewa nawet jeśli jest on ukryty. W związku z tym, że nie jest on usuwany to nie jest wywoływana metoda ngOnDestroy podczas ukrywania. Jednak jest on szybszy od ngIf’a ponieważ nie musimy tworzyć na nowo elementu w drzewie DOM tylko go wyświetlić. Warto się zastanowić czego potrzebujemy przy projektowaniu interfejsu ponieważ w zależności od potrzeb jedna lub druga metoda może być tą właściwą.
Switch
Na sam koniec konstrukcja, którą w standardowych językach bardzo lubię i osobiście zachęcam do wykorzystania. Często jeżeli w systemie mamy różne role to chcemy wyświetlić różne informacje dla różnych ról. Możemy wykorzystać oczywiście dyrektywę ngIf:
<div *ngIf="zmienna == 'admin'">wartość dla admina</div>
<div *ngIf="zmienna == 'moderator'">wartość dla moderatora</div>Nie jest to zbyt ładne i może powodować problemy przy rozszerzaniu o kolejne możliwości. Dużo bardziej polecam wykorzystanie z dyrektywy ngSwitch dzięki czemu nasz kod będzie wyglądał następująco:
<div [ngSwitch]="zmienna">
<p *ngSwitchCase="'admin'" >wartość dla admina</p>
<p *ngSwitchCase="'moderator'" >wartość dla moderatora</p>
<p *ngSwitchDefault>wartość domyślna</p>
</div>Właściwie nie trzeba tutaj nic dodatkowo pisać ponieważ struktura jest analogiczna jak to co znamy w programowaniu. Najpierw przy pomocy [ngSwitch] przekazujemy zmienną którą będziemy testować a następnie przy pomocy *ngSwitchCase i *ngSwitchDefault sterujemy co ma się wyświetlić dla danych wartości. Jest to bardzo elegackie rozwiązanie i pozwala na przyszłe rozbudowywanie opcji.
Wszystko co dziś pokazałem możecie sprawdzić tutaj. Dodatkowo zachecam do samodzielnego wypróbowania tych dyrektyw,ponieważ jest to najlepszy sposób na naukę