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: Angular 8: podstawowa struktura projektu Plik ng-if.component.ts Angular 8: komponent ng-if-component.ts Plik ng-if.component.html Angular 8: komponent ng-if-component.html Plik ng-if.component.css Angular 8: komponent ng-if-component.css Oraz uruchomiona aplikacja: Angular 8: Uruchomienie aplikacji 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: Angular 8: Dodawanie nowego komponentu 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: Angular 8: Analiza selektora ng-if 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: Angular 8: Flaga logiczna ustawiona na true Oraz dla flagi false: Angular 8: Flaga logiczna ustawiona na 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>