Verwendung von ngIf Else bei Angular

1. Verwendung von *ngIf als eigenständige Funktion in Angular
2. Verwendung von das *ngIf mit else
3. Verwendung von die *ngIf With else- und then-Anweisungen in Angular

Wenn wir als Entwickler Webanwendungen erstellen, müssen wir die Webanwendung so einrichten, dass die Seiten im Handumdrehen angepasst werden. die *ngIf-Anweisung wird praktisch. *ngIf wird verwendet, um auf einer Seite gerenderte HTTP-Elemente zu manipulieren.

Es funktioniert in einem Zustand, in dem wir die Web-App anweisen, eine bestimmte Funktion auszuführen, nachdem einige Parameter festgelegt wurden. Und wenn solche Parameter nicht vorhanden sind, sollte es stattdessen eine andere Art ausführen.

Wir werden einige Funktionen nur mit *ngIf ausführen. Dann werden wir das *ngIf mit der else-Anweisung kombinieren und sehen, was möglich ist. Zuletzt verwenden wir die Kombination *ngIf else then, um HTTP-Elemente zu manipulieren.

Verwendung von *ngIf als eigenständige Funktion in Angular

Hier verwenden wir also die *ngIf-Anweisung neben den true- oder false-Bedingungen.

Wir werden die ganze Arbeit in der app.component.html erledigen.

<h1>*ngIf in Angular</h1>
<h2 *ngIf="true">
  Hi, Youtube
</h2>

Die Webseite zeigt Hi, Youtube an, wenn die Bedingung *ngIf auf true gesetzt ist. Sobald es auf false geändert wird, verschwindet Hi, Youtube von der Webseite.

Wir können die Funktion auch so durch die app.component.ts übergeben:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayMe=true;
}

Und wir ändern dann den Wert *ngIf in displayMe wie unten:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe">
  Hi, Youtube
</h2>

Genau wie im ersten Beispiel funktionieren die Grundregeln gleich.

Verwendung von das *ngIf mit else

Wenn die *ngIf-Bedingung mit der else-Anweisung kombiniert wird, hilft uns dies zu entscheiden, welche Inhalte zu jedem Zeitpunkt auf der Webseite erscheinen sollen.

Diese Methode erfordert, dass wir die andere Anweisung, die in Hi, Youtube erscheinen soll, innerhalb des ng-template-Tags verschachteln.

Die app.component.html sieht dann so aus:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe else elseBlock">
  Hi, Youtube
</h2>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Sie werden feststellen, dass wir die else-Anweisung neben der *ngIf-Bedingung verwendet haben, was uns eine bessere Kontrolle über den Inhalt der Webseite ermöglicht.

Wenn also in app.component.ts displayMe einen wahren Wert hat, wird Hi, Youtube angezeigt. Wenn es falsch ist, wird Hi, Twitter angezeigt.

Verwendung von die *ngIf With else- und then-Anweisungen in Angular

Im vorherigen Beispiel wurde uns das ng-template vorgestellt, das neben der else-Anweisung funktioniert. Bei Verwendung mit *ngIf und else ermöglicht die then-Anweisung die Manipulation von Inhalten innerhalb des ng-template.

Es ist eine willkommene Lösung für einen Programmierer, der eine strukturierte und übersichtliche Codedatei führen möchte.

Unsere app.component.html wird wie folgt konfiguriert:

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe; then ifBlock else elseBlock">
  Hi, Youtube
</h2>
<ng-template #ifBlock>
<h2>
    Hi, Google
    </h2>
</ng-template>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

Wenn also in app.component.ts displayMe einen wahren Wert hat, wird Hi, Google angezeigt, und wenn es sich um einen falschen Wert handelt, wird Hi, Twitter angezeigt.