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

Angular 2 Grundkurs

Pipes benutzen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video demonstriert die Nutzung von Pipes mit uppercase, slice, date und number.
05:08

Transkript

In diesem Video möchte ich euch demonstrieren, wie einfach es ist, dass ihr Pipes innerhalb des Angular 2.0-Kontextes verwendet. Wie das funktioniert ist im Grunde genommen wie folgt. Ich habe hier eine Ausgabe. Die Ausgabe erfolgt diesmal anhand einer Zeichenkette, die mir die Methode "getDescription" wiedergibt Es wäre auch überhaupt gar kein Problem, wenn ich hier eine ganz normale Bindung von einem Wert hätte, also ohne Methode. Das spielt überhaupt gar keine Rolle. Möchte ich jetzt ein Pipe anwenden, ist der erste Schritt, den ich hier mache, einfach ein Hochstrich zu machen, also ein Pipe. Gefolgt von dem Namen des Pipes, das ich nutzen möchte. Und der Pipe, den ich hier verwenden möchte, ist zum Beispiel ein SlicePipe. Der SlicePipe, das ist ein Pipe, der einen Teilbereich der Ausgabe wiedergibt. Wenn ich den Teilbereich der Ausgabe wiedergebe, kann ich als ersten Parameter geben, ab welcher Position. Wenn ich das also auf diese Art und Weise speichere, ändert sich überhaupt nichts. Ihr seht, das das "Lorem ipsum" immer noch das erste Zeichen ist. WÜrde ich jetzt hier aber beispielsweise "20" reinschreiben, Würde es nicht mehr "Lorem ipsum" lauten, sondern "t amet". Würde ich wieder bei "0" beginnen, könnte ich alternativ auch mit einem zweiten Parameter, - ihr seht, dass ich Parameter immer mit einem Doppelpunkt getrennt übergebe - hier sagen, ich hätte gerne "30" Zeichen hier. Und dann seht ihr, dass automatisch hier 30 Zeichen dann beschränkt wurden und dargestellt worden sind. Ich mach e mal ein paar mehr. So. Klasse. Es ist auch überhaupt kein Problem wenn ihr Pipes in Kette schaltet. So wäre es gar kein Ding, wenn ich jetzt hier ein weiteres Pipe hintendran hänge und beispielsweise "uppercase" sage. Mit diesem Pipe bin ich in der Lage, die Ausgabe in Großbuchstaben umzuwandeln. Das heißt, erstmal kommt die Ausgabe. Die Ausgabe wird in dem ersten Pipe durchgereicht, mit zwei Parametern, die ich jeweils mit einem Doppelpunkt trenne. Und dessen Ausgabe, von diesem Pipe, wird dann wiederum an die nächste Pipe gereicht und so kann ich quasi in Kette so viele Pipes wie ich möchte hintereinander schalten. Weitere Pipes habe ich euch in meiner Applikationskomponente vorbereitet. Hierfür habe ich in meiner Applikationskomponente zwei Zahlenwerte hier definiert, - ich mache die mal ein bisschen kürzer, dann ist es einfacher zu erkennen - und zwar "1-2-3-4-5" Komma "1-4-1" sowie "2" Komma "1-4". Zusätzlich habe ich noch ein "dat" Objekt gemacht, hier eine "dat"-Eigenschaft, die die Millisekunden vom aktuellen Datum sind. welche ich ebenfalls später in einem Datumsfilter anzeigen möchte. Die Filter verwende ich innerhalb meines Templates und hier seht ihr, dass ich euch die ersten Filter mal demonstrieren möchte. Und zwar sind das die Zahlenfilter, hier die ich verwende, Und wunderbar hier zu erkennen ist, dass ich bestimmen kann, wieviel ganzzahlige Werte ich haben will und wie viele Nachkommastellen ich haben will. Hier ist also zu erkennen, dass die Zahl 1-2-3-4-5-6 also 123.456, Komma, 1-4-1 umgewandelt wurde und die Tausenderstellen mit einem Koma gesetzt worden sind. Leider Gottes ist es so, dass die Internationalisierung im Release Candidate noch nicht super funktioniert, deswegen wechsle ich an dieser Stelle auf Safari mal. Und da sehen wir, dass das Ergebnis schon deutlich besser aussieht. Das ist so, wie ich in Deutschland die Trennung mit Tausendern und entsprechend die Nachkommastellen erwarten würde. Nochmal zur Erinnerung: Ich habe gesagt, ich brauche mindestens drei ganzzahlige Werte und Nachkommastellen brauche ich eins bis drei. Bei der zweiten Zahl sage ich drei Ganzzahlige, Nachkomma vier bis fünf, und hier sehen wir wunderbar, dass er dann führende Nullen vor die zwei gesetzt hat und zwei folgende Nullen hinter "1,4". Ich könnte das Ganze jetzt natürlich auch so modifizieren, dass ich gar keine Nachkommastellen haben will. Dafür müsste ich im Code einfach hier "0-0 eintippen". Alternativ, wenn ich dann nur eine einzige Nachkommastelle haben wollte, natürlich "0-1" - das mache ich hier mal - und so kann ich dann selber bestimmen, wie die Nachkommastellen dargestellt werden sollen. Ich kann auf gleiche Art und Weise auch Datum darstellen. Dafür verwende ich das DatePipe. Und das DatePipe erwartet von mir ein Parameter. Der Parameter ist sehr individuell, also ich kann zum Beispiel als Eigenschaft "LongDate" übergeben, dann wird mir hier das Datumsformat normal im langen Format wiedergegeben. Alternativ könnte ich auch sagen, gib mir das mal im short-Format, dann ist es einfach der 10.6.2016. Und natürlich kann ich das Ganze auch noch so definieren, dass ich hier mittels eines Patterns bestimmen kann, welche Eigenschaften des Datums ich genau sehen möchte. Eine detaillierte Zusammenfassung dessen, was "date " hier alles unterstützt, findet ihr in der API, das will ich mir jetzt hier an dieser Stelle sparen. Mir ist es nur einfach wichtig, dass ihr einen Überblick darüber bekommt, wie ihr die Pipes benutzen könnt.

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!