Konzept von ngIf in Angular 2
-
Hide Components in CSS vs.
ngIfin Angular 2 -
Ausdrücke in
ngIfin Angular 2 -
Schritte zur Verwendung von
ngIfin Angular 2
In Angular 2 ist die Direktive ngIf eine der einfachsten und nützlichsten Direktiven in Angular 2. Sie wird verwendet, um HTML-Elemente basierend auf der Auswertung eines Ausdrucks bedingt anzuzeigen oder auszublenden.
Die Direktive ngIf wertet einen Ausdruck aus, und wenn sie wahr ist, wird ein bestimmtes Element gerendert. Wenn nicht, wird dieses Element überhaupt nicht gerendert.
Diese Direktive hilft, die Anzahl der DOM-Elemente zu reduzieren, wenn mehrere Ansichten gemeinsame Merkmale aufweisen.
In diesem Artikel erfahren Sie alles über ngIf.
Hide Components in CSS vs. ngIf in Angular 2
Auch wenn HTML keine if-Anweisung hat, können die Attribute show und Visibility in CSS verwendet werden, um Teile der Seite auszublenden.
Wir können CSS-Eigenschaften zu einem HTML-Element hinzufügen oder daraus entfernen und ein Element mithilfe von JavaScript auf der Seite ausblenden. Dies ist jedoch nicht dasselbe wie ngIf.
Wenn ein Element in ngIf versteckt ist, existiert es nicht auf der Seite.
Wenn Sie die Chrome-Entwicklungstools verwenden, um die Seite zu untersuchen, sehen Sie keine HTML-Elemente im DOM.
Ausdrücke in ngIf in Angular 2
Die ngIf-Direktive akzeptiert jeden gültigen Typescript-Satz als Eingabe, nicht nur einen booleschen Wert. Als nächstes wird die Gründlichkeit des Ausdrucks bewertet, um zu bestimmen, ob das Element angezeigt werden soll oder nicht.
Wir können neben booleschen Werten auch Texte, Arrays und Objekte an ngIf senden.
Schritte zur Verwendung von ngIf in Angular 2
Um ngIf in Angular 2 zu verwenden, sind folgende Schritte zu befolgen:
-
Schreiben Sie einen Ausdruck, der als wahr oder falsch ausgewertet wird.
-
Schließen Sie den Ausdruck in öffnende und schließende Klammern ein, zum Beispiel
(true || false). -
Pipe-Zeichen hinzufügen
|zwischen öffnender und schließender Klammer. -
Fügen Sie Ihrer Vorlage die Direktive
ngIfmit dem Ausdruck aus Schritt 1 hinzu.
Beispiel:
Lassen Sie uns ein vollständiges Beispiel von ng-if in Angular 2 besprechen.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template:
`<h1 *ngIf=" 34< 100" >I'm Adil</h1>
<h1 *ngIf="3>1" > I'm John</h1>
<h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent {
}
Klicken Sie hier, um die Live-Demonstration des obigen Codes zu überprüfen.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook