Angular 2 Grundkurs

ngIf

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
ngIf ist eine strukturelle Direktive, die Elemente, auf die sie angewandt wird, in das DOM einhängen und entfernen kann. Die Funktionsweise verdeutlicht dieser Film.
06:51

Transkript

In den kommenden Minuten möchte ich gerne mit euch über Direktiven sprechen. Direktiven gibt es von Haus aus schon relativ viele in der Angular 2-Welt. Hier sehen wir, dass im common-Paket beispielsweise eine Handvoll Direktiven sind. Und im ersten Schritt möchte ich mich sehr gerne mit euch über strukturelle Direktiven unterhalten. Zu den strukturellen Direktiven gehört NgFor. Genauso wie NgIf, und in diesem Video kümmern wir uns um NgIf. Eine strukturelle Direktive zeichnet sich dadurch aus, dass sie in der Lage ist, den dom zu manipulieren. Dies tut sie, indem sie Elemente hinzufügt oder entfernt. Welches Element, bestimmt ihr über die Direktive selbst. Denn das Element, auf das diese Direktive angewendet wird, ist das Template, das dann quasi hinzugefügt wird oder entfernt wird. Wie entscheidet die Direktive jetzt, wann sie es hinzufügt und wann sie es entfernt? Ganz einfach, NgIf erwartet als Statement von euch eine Bedingung. Ist die Bedingung erfüllt, also "true", wird dann das dom-Element hinzugefügt, ist sie "false", wird es entsprechend entfernt. Dies möchte ich euch zeigen, indem ich jetzt das bisherige vorhandene Beispiel, das ich hier habe, mit dem ich meine Daten anzeige, erweitern möchte in der Form, dass ich auch die input-Url, die momentan hier als Quelle des Bildes definiert ist, gerne von außen zugänglich machen möchte. Deswegen verschiebe ich hier fix mal, die input-Url nach oben um das etwas schicker zu haben. Entferne das jetzt hier als Wertzuweisung und sage, ich möchte es von außen zugänglich machen über den Attributnamen "image". Speichere ich das jetzt, passiert etwas ganz Interessantes. Ich sehe hier ein broken image. Das broken image sehe ich deswegen, weil die imageUrl jetzt nicht definiert ist. Ich habe "image" von außen auch noch nicht definiert. Dazu wäre ich später ohne Probleme in der Lage, indem ich jetzt nun in meiner Komponente selber jetzt auch "image" als Wert definieren kann. Die code completion funktioniert hier nicht, das ist definitv "image", das ich als Wert definieren kann. So, das wäre richtig. Und dadurch, dass ich jetzt diesen Wert noch nicht definiert habe, haben wir das Szenario, dass wir hier ein broken image haben. Wenn wir uns jetzt darüber Gedanken machen, dass NgIf ja technisch in der Lage ist, eine Bedingung zu prüfen und entsprechend dom-Elemente hinzuzufügen oder zu entfernen, könnte ich ja theoretisch etwas ganz Einfaches machen. Ich könnte ja sagen, dass dieser "image"-Knoten, den ich jetzt hier sehe, nur dann angezeigt werden soll, wenn auch wirkliche eine Url definiert ist. Ihr denkt daran: Wenn ein Wert undefiniert ist, innerhalb von Javascript, ist es, wenn ich das als Boolean-Check mache dann auch gleichzeitig als "false" zu interpretieren. Das bedeutet ja theoretisch, wenn ich jetzt hier mein NgIf verwenden würde, dann könnte ich hier auf die imageUrl verweisen. Die imageUrl ist initial "undefined", dementsprechend wird diese Bedingung nicht erfüllt sein. Und das wird zur Folge haben, dass dann dieser Knoten nicht angezeigt wird. Ich beweise euch das schnell indem ich hier nochmal den Inspektor starte. Ihr seht jetzt schon, hat wunderbar funktioniert, das Bild ist nicht mehr vorhanden. Ich gehe jetzt hier rein, gehe in meinen User, und innerhalb des Users könnt ihr jetzt hier wunderbar erkennen, dass der header-Bereich da ist, hier ist auch der "div"-Bereich, aber es ist de facto kein Kätzchen mehr zu sehen, kein broken image, kein image-Knoten. Was muss jetzt passieren, damit dieses image angezeigt wird? Der Wert von imageUrl darf nicht mehr "undefined" sein. In dem Fall ist es dann auch als Bedingung als "true" zu interpretieren. Also werde ich jetzt Folgendes machen: ich gehe zurück in die "app.component.ts", und definiere jetzt hier den Pfad zu dem Bild. Ich wusste dass das kommt, und dafür dass ich den Pfad mir nicht in die Zwischenablage speichern wollte, habe ich es hier einfach schnell kopiert - Es ist wie bei den Fernsehköchen - Also habe ich jetzt hier die "imageUrl". Die imageUrl habe ich jetzt entsprechend definiert innerhalb meiner "AppComponent" und muss diese nun, weil ich es ja bindbar gemacht habe, hier über "input", jetzt übergeben. Und das mache ich, indem ich jetzt hier im Template selber "image" binde, mit dem Wert der imageUrl. Speichere ich das Ganze, könnt ihr nun hervorragend sehen, dass dann entsprechend dieser Wert "true" ist. und das Element angezeigt wird. Ich gehe nochmal in die Untersuchung rein. Obwohl ich glaube, die Untersuchung können wir uns auch sparen. Wir sehen ja, dass das Bild jetzt eben da ist. Und das funktioniert aufgrund der strukturellen Direktive. Lasst uns noch eine Sache ganz kurz anschauen, und zwar haben wir ja hier festgestellt, dass wir strukturelle Direktiven mit einem Sternzeichen davor versehen haben. Und dieses Sternzeichen ist im Wesentlichen nichts anderes als ein Shortcut. Der Shortcut, der dient dafür, dass etwas ganz besonderes in der Angular-Welt gemacht wird, nämlich, dass diese Direktive in Kombination mit einem Template-Element hinzuigefügt wird. das alternativ verwendet werden kann um dom-Elemente hinzuzufügen oder zu entfernen. Ich bin also in der Lage, statt des Shortcuts, also quasi der Abkürzung, mit dem Sternzeichen hier, das Ganze auch darüber zu programmieren, dass ich sage, es gibt ein Template. Dieses Template definiere ich, indem ich Kinder darin setze, und statt des NgIfs, das ich jetzt hier definiere, - ich speichere das jetzt erstmal so, dann sehen wir, dass das Element nicht vorhanden ist - werde ich jetzt hier das NgIf ohne Sternchen setzen. Speichere das Ganze und dann ist es entsprechend hier zu finden. Was haben wir denn damit gelernt? Wir haben also gelernt, dass der Stern, den wir hier vor dem NgIf setzen, eigentlich nur dafür sorgt, dass der Compiler in der Angular-Welt selber Bescheid weiß: Ich muss das Ganze eigentlich in einem Template kapseln und dann entsprechend in einem Template-Element. Das ist quasi eine eher interne Komponente, die ich dann verwenden kann mit der Direktive NgIf. und das mit dem Stern ist de facto lediglich ein Shortcut. Ich lasse euch mal beides in diesem Sample drin, damit ihr dann später beide Szenarien nochmal kennt. Das mit demTemplate ist im Übrigen ein ganz tolles Mittel, falls ihr mal das Bedürfnis habt, nicht nur einen einzigen Knoten innerhalb einer NgIf-Anweisung steuern zu wollen, sondern wirklich mehrere Knoten, denn in dem Template wärt ihr natürlich theoretisch in der Lage, viel komplexere dom-Elemente zu beschreiben. So. Großartig. Hier noch Sternchen davor machen. Großartig. Perfekt, funktioniert wieder.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!