Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Angular 2 Grundkurs

Style-Eigenschaften binden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Hier geht es darum, wie man Style-Eigenschaften binden kann.
03:03

Transkript

Ihr werdet während der Entwicklung mit Angular 2.0 ganz sicher mal in die Situation gelangen, wo ihr gerne Style-Eigenschaften für eure html-Knoten binden wollt. Wie ihr das Ganze realisieren könnt, möchte ich euch daher in diesem Video einmal kurz demonstrieren. Im Wesentlichen könnt ihr Style-Eigenschaften genauso binden wie normale Eigenschaften. Das heißt, ihr könnt innerhalb eines Knotens einfach mittels der eckigen Klammern, die ihr habt hier sagen: Ich möchte eine Style-Eigenschaft binden. Ich möchte das mal machen, in diesem Beispiel. über "style.margin", das heißt, ich möchte einen Abstand definieren. Dann mache ich hier eine Zuordnung und die Zuordnung muss auf eine Eigenschaft innerhalb eurer Komponentenklasse verweisen. Die Eigenschaft möchte ich "margin" nennen, welche noch nicht hier definiert ist also hole ich das fix nach. "margin" soll in meinem Fall vom Typ number sein. und den Wert "10" erhalten. Großartig. Wenn wir das Ganze jetzt einmal kompilieren lassen, dann werden wir feststellen, dass hier eine Aktualisierung stattgefunden hat. Aber, ganz wichtig: Bitte denkt unbedingt daran, dass "margin" selber ja noch zusätzlich eine Einheit haben möchte. Das heißt ich schnappe mir noch ein Operator und werde die Einheit Pixel hier noch hinzufügen. Wenn ich jetzt das Ganze nochmal speichere, dann werdet ihr sehen, dass wunderbar, zehn Pixel Abstand hier auch tatsächlich entstanden sind. Zehn Pixel fühlen sich ein bisschen viel an. Mache mal fünf daraus und dann sieht es ein bisschen schicker aus. Ganz wichtig: Wenn ich diese Einheit hier nicht zwingend über den Operator definieren möchte, kann ich übrigens auch die Einheit hier hinten als Eigenschaftswert mit definieren. Schaut mal, dann ist das exakt das gleiche Verhalten. Und das Ganze kann ich sogar dann# weil es ja auch prozentuale Werte geben könnte dann hier mit Prozent definieren. Und so bin ich in der Lage auch Style-Eigenschaften inklusive den jeweiligen Einheiten dann mit zu übergeben. Großartig! Natürlich bin ich auch in der Lage, ganz einfache Style-Attribute zu setzen, wie beispielsweise float. Ich will das hier mal fix demonstrieren, dafür klaue ich mir ganz fix den jetzigen Ausdruck. Werde dann hier "float" anlegen. Großartig. Mit der Eigenschaft "float", die es logischerweise jetzt noch nicht gibt. Und "float" muss ein string sein, daher klaue ich mir hier die "imageUrl". und mache dann mal fix ein "left" draus. Speichere das Ganze und jetzt könnt ihr wunderbar sehen, dass dann auch hier das "float left" gegriffen hat. Und wenn wir uns das Ganze mal im Inspektor anschauen, dann erkennen wir hier, wenn wir auf das Element draufgehen, die fünf Pixel Abstand, die wir hatten, sowie das float left, dass wir hier definiert haben. Und das Ganze wurde hier in den Style-Eigenschaften definiert: Margin fünf Pixel und float left. In diesem Video habt ihr gelernt, wie ihr in der Lage seid, Style-Eigenschaften innerhalb der Angular 2.0-Welt zu binden.

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!