Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

ngClass und ngStyle

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video erläutert, wie die Attribut-Direktiven ngClass und ngStyle verwendet werden.
06:46

Transkript

Eine weitere Form von Direktiven, die wir innerhalb von Angular 2.0 haben sind die Attribut-Direktiven. Mittels diesen Direktiven sind wir in der Lage, das Erscheinungsbild und auch das Verhalten eines dom-Elementes, auf das wir diese Attribute anwenden, zu modifizieren. Ich möchte das euch sehr gerne mal mit einem Beispiel demonstrieren. Ich habe hier meine Liste, so wie wir es bisher schon erzeugt haben. Und das Besondere an dieser Liste soll jetzt sein, dass ich, sobald ich ein Element selektiere, dieses auch farblich kennzeichnen möchte. Hierfür habe ich eine css-Klasse hinzugefügt. Die css-Klasse, die ich hinzugefügt habe, ist "active" und "active" soll immer dann angewendet werden, wenn es aktiv ist. Zusätzlich habe ich auch noch die Möglichkeit, "italic" anzuwenden. Wenn ich "italic" anwende, wird das Ganze auch noch obendrein kursiv. Sinn ergibt das Ganze natürlich jetzt nur, wenn "active" dann erscheint, wenn es auch selektiert ist. Ich werde dafür jetzt folgende Vorarbeit leisten. Innerhalb der Applikationskomponente selbst, wo die Logik drin ist, werde ich nun innerhalb des "select"-Ereignisses, dass ich immer dann bekomme, wenn ich hier draufklicke, - dann bekomme ich ja das User-Objekt - das selektierte Objekt mir merken, indem ich jetzt einfach ein "selectedUser" erzeuge, vom Typ "IUserVO". Und das "selectedUSer" soll gleich sein, dem Wert, den ich über das Ereignis bekomme. Perfekt. Jetzt kann ich dafür sorgen, dass ich sicherstellen kann, dass der Wert "selectedUser" immer den Wert annimmt, von dem Objekt, das ich gerade anklicke. Etwas undankbar ist es, dass das "selected" dann hier auch an dieser Stelle dann disabled wird. Das hebel ich einmal ganz kurz aus, indem ich an die Stelle gehe, wo es deaktiviert wird. Das ist übrigens auch die Stelle, wo das Event gefeuert wird. Und hier seht ihr, dass tatsächlich das komplette Datenobjekt als Information rausgeht. Jetzt sind wir schon einen sehr weiten Schritt vorwärts gekommen. müssen im Grunde genommen jetzt nur noch die Attribut-Direktive verwenden, die uns glücklich machen soll. Die Attribut-Direktive, die uns hier glücklich machen soll, ist NgClass. Und diese NgClass-Direktive hat jetzt folgende Eigenart. Ich kann das NgClass hier verwenden und als Zuweisung kann ich ein Objekt übergeben. Innerhalb des Objektes definiere ich dann einen Klassennnamen als String. - Da habe ich mich vertippt. - Anschließend muss dieser Zuordnung eine Bedingung folgen. Wenn ich jetzt hier einfach "true" reinschreiben würde, hätte das zur Folge das alles ganz normal aktiv bleibt. Ich kann es auch einmal innerhalb des Inspektors zeigen. Schaut mal. Das ist jetzt hier da die Klasse "active" hinzugekommen. Und das Gleiche kann ich auch mit "italic" machen. Nur wenn ich jetzt hier bei "italic" ein "false" machen würde, würde es dann logischerweise nicht angezeigt werden. Würde ich hier ein "true" machen, würde dann zusätzlich noch das "italic" greifen. Auch das will ich euch einmal fix zeigen. Und dann seht ihr, dass dann hier "active" und "italic" hinzugefügt worden sind. Der Clou ist jetzt ganz einfach. Statt das "true" hier statisch zu hinterlegen, werde ich jetzt Folgendes machen. Ich werde sagen, das aktuelle Objekt, mit dem diese Komponente erzeugt worden ist, soll verglichen werden mit dem selektierten Objekt "selectedUser", das ich ja hier, jetzt innerhalb meiner AppComonent befindet und den Wert annimmt von dem Objekt, auf das ich geklickt habe. Testen wir das Ganze, sehen wir, wenn ich jetzt hier draufklicke, wir das ganze dann automatisch selected und ich brauche mich im Grunde genommen um nichts weiter zu kümmern. Im Übrigen kann ich neben NgClass dieses komplette Objekt zu übergeben, auch theoretisch einen Ausdruck übergeben. Mit Ausdruck meine ich einfach, dass ich auch in der Lage gewesen wäre, jetzt das in die Applikationskomponente zum Beispiel zu geben, hier eine Variable zu setzen, "userClasses" als String. Und dann kann ich hier beispielsweise "active" und "italic" reinschreiben. Und als Alternative wäre ich also hier ohne Probleme auch in der Lage gewesen, statt dieser Objektschreibweise mit dem "true", einfach hier den Ausdruck direkt zu übergeben. Und dann seht ihr, dass das dann automatisch übergeben wird. Wartet ganz kurz, das hat nicht geklappt. Doch das hat schon geklappt, ich habe mich nur mit "italic" verschrieben. So, jetzt passt es. Das heißt, ich bin also auch in der Lage, innerhalb des Ausdruckes direkt den kompletten Wert zusetzen. Finde ich persönlich jetzt nicht so super schön, wenn ich ganz ehrlich bin, deswegen mag ich es schon sehr leiden, das auf diese Art und Weise dann zu definieren. Bleibt jetzt nur noch eine weitere Direktive in dem Kontext mal euch vorzustellen. Ihr seid näml1ich auch in der Lage auf diese Art und Weise Style-Werte zu setzen. Und so könnt ihr beispielsweise hier einen margin-Wert setzen. Und den Wert könnt ihr hier entweder binden oder einfach hart übergeben. Speichere ich das Ganze, passiert momentan nichts. Liegt aber auch daran, dass ich mich hier vertippt habe. Das Ganze heißt nämlich "style". Und jetzt sehen wir, dass das mit dem margin-Wert auch was wird. "555" war vielleicht etwas übertrieben. Mache ich mal "55" und dann seht ihr, dass wir entsprechend einen margin hier haben. Wir sind also auch in der Lage, NgStyle-Elemente ohne Probleme hier mit Werten zu versehen. Und selbstverständlich auch in diesem Kontext wären wir jetzt in der Lage, diesen Wert außen zu speichern. So. Da müsste ich dann entsprechend hier nur eine Bindung auf "margin" setzen. Speichere das, und dann ist hier wunderbar die 55 zu erkennen. Der Wert "margin" sollte idealerweise nicht als string normalerweise vorliegen. sondern als number. Dann kann ich das Ganze als Operation einfach innerhalb meines Templates nutzen, indem ich hier nochmal "px" hinten dranhänge. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, die Attribut-Direktiven NgClass und NgStyle zu verwenden.

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!