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:
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ść
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żeli już jest zalogowany to przycisk do edycji profilu. Możemy uzyskać taki efekt na dwa sposoby. Pierwszy to dwukrotne wykorzystanie dyrektywny *ngIf
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:
Taki kod jest już dużo bardziej poukładany i choćby 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
Hidden
Do ukrycia elementu możemy także wykorzystać atrybut [hidden] lub [style.display]="'none'". Trzeba tylko pamiętać, iż wtedy element jest ukrywany ale ciągle istnieje w drzewie DOM. jeżeli 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 choćby jeżeli jest on ukryty. W związku z tym, iż 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ą adekwatną.
Switch
Na sam koniec konstrukcja, którą w standardowych językach bardzo lubię i osobiście zachęcam do wykorzystania. Często o ile 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:
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:
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ę
