Ein- und Ausblenden in Angular

Wir werden Beispiele für das Ein- und Ausblenden von Komponenten oder Elementen in Angular vorstellen.

Ein- und Ausblenden in Angular

Bei der Entwicklung einer kommerziellen Anwendung müssen wir einige Daten basierend auf Benutzerrollen oder -bedingungen verbergen. Wir müssen die gleichen Daten gemäß den Bedingungen in dieser Anwendung anzeigen.

In diesem Tutorial zeige ich Ihnen eine einfache Methode, mit der wir Daten basierend auf Bedingungen ein- und ausblenden können.

Lassen Sie uns eine neue Anwendung erstellen, indem Sie den folgenden Befehl verwenden.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Angenommen, wir haben eine Vorlage oder einen Codeblock, den wir nur anzeigen möchten, wenn die Bedingung wahr ist, und ihn ausblenden, wenn sie falsch ist. Wir können es anhand dieses Beispiels ein- und ausblenden.

Zuerst erstellen wir einen Demo-Inhalt in app.component.html, der eine Überschrift, einen Absatz und ein Eingabefeld enthält, und packen ihn in ein div.

# Angular
<div>
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Nun erstellen wir in app.component.ts eine neue Variable element und setzen diese auf false.

# Angular
element = false;

Wir werden *ngIf verwenden, um unser div basierend auf der Bedingung anzuzeigen und zu verbergen.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element"/>
</div>

Wie Sie im obigen Beispiel sehen können, haben wir eine Bedingung festgelegt, wenn das element true ist, wird das div angezeigt, und wenn die Bedingung false ist, wird es nicht angezeigt.

Das div wird also ausgeblendet, weil wir das element auf false gesetzt haben. Lassen Sie uns nun den Wert des Elements auf true ändern und prüfen, wie es funktioniert.

Ausgabe:

Sie können jetzt sehen, dass sich die Bedingung, die wir für div festgelegt haben, geändert hat, als wir den Wert des Elements geändert haben, und es begann, das div mit allen darin enthaltenen Elementen anzuzeigen.

Stellen Sie sich vor, wir möchten Daten ein- und ausblenden, wenn auf bestimmte Schaltflächen geklickt wird. Wir können dieses einfache Beispiel mit demselben *ngIf erstellen.

Erstellen wir nun zwei Schaltflächen mit zwei Funktionen showData() und hideData(). Wir müssen diese beiden Schaltflächen außerhalb des div erstellen, damit sie nicht ausgeblendet werden, wenn die Bedingung auf false geändert wird.

Unser Code in app.component.html sieht also wie folgt aus.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button (click)="showData()">Display Data</button>
<button (click)="hideData()">Hide Data</button>

Lassen Sie uns nun diese beiden Funktionen in app.component.ts erstellen. showData() ändert den Wert von element auf true und hideData() ändert den Wert von element auf false.

Der Code sieht also wie folgt aus.

# Angular
showData() {
    return (this.element = true);
  }
  hideData() {
    return (this.element = false);
  }

Wir werden jetzt etwas CSS-Code hinzufügen, damit unsere Schaltflächen gut aussehen.

# Angular
button{
  margin-top: 10px;
  padding: 10px;
  background-color: aquamarine;
  border: none;
  margin-right: 10px;
}

Lassen Sie uns überprüfen, wie es funktioniert.

Ausgabe:

Wie Sie im obigen Beispiel sehen können, können wir Inhalte mit den Methoden *ngIf und Schaltfläche (click) leicht ein- und ausblenden.

Wenn wir die Schaltfläche Display Data ausblenden möchten, wenn der Inhalt die Schaltfläche Hide Data anzeigt, wenn die Daten ausgeblendet sind, können wir dasselbe Konzept auch für Schaltflächen verwenden.

Lassen Sie uns also eine *ngIf-Bedingung erstellen, wenn das element true ist, wird nur die Schaltfläche zum Ausblenden von Daten angezeigt, und wenn das element false ist, wird die Schaltfläche zum Anzeigen von Daten angezeigt.

# Angular
<div *ngIf="element == true">
  <hello name="{{ name }}"></hello>
  <p>Enter your name:</p>
  <input type="text" id="element" />
</div>
<button *ngIf="element == false" (click)="showData()">Display Data</button>
<button *ngIf="element == true" (click)="hideData()">Hide Data</button>

Wir müssen keine Codezeile in die Datei app.component.ts schreiben, da die von uns erstellten Funktionen und die Funktion *ngIf uns dabei helfen, dasselbe auf Schaltflächen zu erreichen. Also, lassen Sie uns das Ergebnis überprüfen, wie es jetzt funktioniert.

Ausgabe:

In diesem Tutorial haben wir also gelernt, wie man Inhalte basierend auf den Bedingungen mit *ngIf ausblendet und anzeigt, und wir haben auch gelernt, wie man die (click)-Methode von Schaltflächen verwendet, um uns dabei zu helfen, Daten auf der Schaltfläche auszublenden und anzuzeigen Klicks.