Wprowadzenie
Dyrektywa ta jest używana do dodawania lub usuwania elementów HTML zgodnie z instrukcją. Jeżeli jest wartość jest określona jako false wówczas element jest usuwany z drzewa DOM - w przeciwnym wypadku zostanie wyświetlony.
Sama składania nie jest skomplikowana i prezentuje się w poniższy sposób:
<p *ngIf="warunek">
//warunek jest prawdziwy, wartość logiczna: true
</p>
<p *ngIf="!warunek">
//warunek jest fałszywy, wartość logiczna: false
</p>
Możemy również dokonać modyfikacji powyższego warunku wprowadzając blok else:
<div *ngIf="warunek; else szablonDlaWarunkuElse">
//warunek jest prawdziwy, wartość logiczna: true
</div>
<ng-template #elseBlock>
//warunek jest fałszywy, wartość logiczna: false
</ng-template>
Dyrektywy ngIf nie używany do ukrywania a całkowitego usunięcia elementu z drzewa DOM .
Przejdźmy teraz do implementacji każdego z powyższych przypadków. W tym celu stworzymy nowy projekt do którego dodamy komponenty tak, aby w przyszłości mieć podgląd do każdej z omówionych dyrektyw (ten i kolejne wpisy).
Przykłady
Mam nadzieję, że bez problemu utworzycie nową aplikację, dodacie do niej nowe komponenty oraz dokonacie reorganizacji struktury projektu celem łatwiejszego wykorzystania projektu-ściągawki w przyszłości.
Posługując się poniższymi artykułami:
utworzymy aplikację w której modułem głównym będzie Dashboard. Następnie dodamy kilka komponentów, które pozwolą nam na testowanie różnych dyrektyw. Poniżej zrzut ekranu z otwartego projektu oraz kluczowych plików:
Plik ng-if.component.ts
Plik ng-if.component.html
Plik ng-if.component.css
Oraz uruchomiona aplikacja:
Możecie zobaczyć, że logika z powyższych zrzutów ekranów została również zaimplementowana w pozostałych komponentach.
Warto jeszcze na chwilę wrócić do tworzenia nowych komponentów. Jako, że jesteśmy już nieco bardziej zaawansowani oraz zapoznaliśmy się z terminalem warto wykorzystać możliwości jakie daje nam Angular CLI. Przechodząc do odpowiedniej ścieżki w naszej strukturze projektu i wywołując polecenie do tworzenia nowego komponentu: ng genreate component nazwa_komponentu możemy uniknać procesu przenoszenia plików komponentu to wskaznej lokalizacji. Spójrzcie na poniższy zrzut ekranu:
Z tak przygotowanym projektem możemy przejść do właściwej części wpisu.
Najmniej skomplikowany przykład użycia dyrektywy *ngIf został użyty w pliku ng-if.component.html:
<p *ngIf="isTimeForThisComponent" class="article-subject">
{{title}}
</p>
<p *ngIf="!isTimeForThisComponent" class="not-article-subject">
{{title}}
</p>
W zależności od stanu flagi isTimeForThisComponent zdeklarowanej w klasie naszego komponentu element zostanie wyświetlony lub nie. Pamiętacie, że instrukcja ta nie ukrywa a usuwa cały element z drzewa DOM. Można to zobaczyć w narzędziach programistycznych w przeglądarce:
Oczywiście nasz szablon HTML może wyglądać zupełnie inaczej. Możemy wykorzystać zdefiniowany parametr w celu wyświetlenia różnych informacji dla użytkownika czy ukrycia tylko wybranych elementów a nie całej sekcji:
<p *ngIf="isTimeForThisComponent" class="article-subject">
{{title}}
</p>
<p *ngIf="!isTimeForThisComponent" class="not-article-subject">
{{title}}
</p>
// Nie komentuje powyższego kodu ponieważ w tym momencie eksperymentujemy
// Do pliku ng-if.component.ts dodałem właściwość show
<div id="another-test">
<button (click)="show = !show">
{{show ? 'Ukryj przycisk i dodatkowy paragraf' : 'Pokaż przycisk i dodatkowy paragraf'}}
</button>
<p>
Obecny status właściwości 'show' = {{show}}
</p>
<p *ngIf="show" id="hidden-message">
<span>
Ten tekst jest widoczny tylko, kiedy właściwość show jest ustawiona na true
</span>
</p>
</div>
Kod możecie skopiować do swojego pliku HTML. Efekt powinien wyglądać w poniższy sposób dla flagi ustawionej na true:
Oraz dla flagi false:
Alternatywny zapis to użycie bloku else oraz wyświetlenie zawartości elementu przy użyciu ng-template - jest to szablon Angulara dostępny tylko i wyłącznie dla obsługi dyrektyw strukturalnych, tj. *ngIf, *ngFor, *ngSwitch oraz dyrektyw niestandardowych. W przypadku zastosowania bloku else możemy wyświetlać różne informacje w zależności od danego stanu:
<div id="another-test">
<button (click)="show = !show">
{{show ? 'Ukryj przycisk i dodatkowy paragraf' : 'Pokaż przycisk i dodatkowy paragraf'}}
</button>
<p>
Obecny status właściwości 'show' = {{show}}
</p>
<p *ngIf="show; else elseBlockExample" id="hidden-message">
Ten tekst jest widoczny, kiedy główny warunek jest spełniony, tj. flaga przyjmuje wartość true!
</p>
<ng-template #elseBlockExample>
Ten tekst jest widoczny, kiedy główny warunek nie jest spełniony, tj. flaga przyjmuje wartość false!
</ng-template>
</div>
