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

Angular 2 Grundkurs

CSS-Klassen binden

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
CSS-Klassen lassen sich in Angular 2.0 sehr einfach binden. Wie's geht, verrät dieser Film.
03:21

Transkript

In diesem Video möchte ich euch gerne zeigen, wie ihr in der Lage seid, Klassen zu binden. Dabei habe ich folgenden Gedanken. Es gibt ja immer mal Szenarien, wo ich abhängig einer Bedingung eine bestimmte Klasse einem Element hinzufügen möchte. Das kann ich in Angular 2.0 super einfach machen. Ich werde zunächst einmal innerhalb meiner Komponente die "styles"-Sektion machen. Diese erwartet ein Array, ein Array von strings, und in diesem kann ich dann meine eigenen Klassen definieren. So. Die Klasse, die ich definieren möchte an dieser Stelle, ist die Klasse "hide". Und die soll nichts Besonderes machen, einfach nur das Objekt unsichtbar machen, das diese Klasse zugewiesen bekommt. Nun kann ich jetzt innerhalb meines Bildes zum Beispiel ganz normal Klassen binden, die es sonst auch noch gibt. So kann ich die float-Eigenschaften hier und die margin-Eigenschaften zum Beispiel in eine Klasse bringen. Das mache ich hier ganz schnell. Und zwar sage ich dann hier, "image"-Klasse und sage dann "margin: 5 Pixel" und das "float" lass ich einfach mal für die Schnelle weg. Lösche das hier. Das nicht mehr und das nicht mehr. Und kann das zum Beispiel ganz fest einbinden indem ich sage, das ist die Image-Klasse, die ich hier standardmäßig immer drin haben will. Ihr seht jetzt auch, dass hier die fünf Pixel Abstand hier wunderbar zu sehen sind. Und als nächstes möchte ich, dass dieses "hide" immer dann erscheint, wenn eine bestimmte Eigenschaft, nämlich "hidden" innerhalb der Klasse, welches ein Boolean ist, auf "true" steht. Damit ich das Ganze jetzt anwenden kann, werde ich eine Bindung verwenden, indem ich innerhalb der Bindung Folgendes schreibe. Ich möchte eine Klasse binden, und zwar die Klasse "hide". Und diese Klasse soll immer dann gebunden sein, wenn der Ausdruck, der dahinter ist, "true" ist. In dem Moment binde ich also auf "hidden". Und auf diese Art und Weise kann ich sehr einfach dafür sorgen, dass das Objekt hier ausgeblendet wird abhängig davon, wie die Eigenschaft hier ist. Also wenn sich die Eigenschaft hier ändern würde, würde ich es dann sichtbar oder unsichtbar geschaltet bekommen. Ich kann im Übrigen auch hier direkt eine Bedingung reinschreiben. So könnte ich auch sagen "username", wenn der genau gleich "Saban" ist, oder "Saban Ünlü", dann soll das Ganze unsichtbar sein. Alternativ könnte ich das natürlich auch verneinen, so dass, wenn es nicht "Saban Ünlü" ist, das Bild dann angezeigt werden kann. In diesem Video habt ihr gemeinsam mit mir gelernt, wie ihr Klassen innerhalb von Angular 2.0 einbinden könnt. Erlaubt mir nur noch einen ganz kurzen Hinweis. Wenn ich jetzt hier auf Untersuchen gehe, dann seht ihr natürlich, dass hier die Klasse "image" drin ist. Und würde ich jetzt "hide" hier dazupacken, - und auf Untersuchen kann ich jetzt logischerweise nicht, deswegen muss ich einmal ganz schnell durchklicken - dann seht ihr, dass er wirklich einfach hingegangen ist und zusätzlich zur image-Klasse "hide" einfach hintendran gehängt hat.

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!