Kategorie

Angular

Einträge für Kategorie: Angular

Angular Structual Directive erstellen

erstellt: 08.07.2018
Eine Structual Directive erlaubt den Zugriff auf DOM Strukturen mittels Hinzufügen, Entfernen oder Manipulieren von Elementen.
Die hier vorgestellte Structual Directive "asRepeat" erlaubt das einfache Iterieren über ein bestimmtes Intervall und erstellt ähnlich wie "ngFor" DOM Elemente.
Man kann sie sich als vereinfachte Form einer for Schleife vorstellen.

Angular Custom Form Control erstellen

erstellt: 09.06.2018
Oft sind normale HTML Inputs für komplexere oder umfangreichere Formulare nicht ausreichend.
Mittels ControlValueAccessor und NG_VALUE_ACCESSOR lassen sich Custom Form Controls realisieren und bei Wertänderungen diese übermitteln.
Zur Demonstration wird ein simpler Zahlen Spinner realisiert, der das normale HTML5 Spinner Verhalten erweitert und individuell gestalten lässt.

Angular Form Controls im Template mittels Keys Pipe iterieren

erstellt: 19.05.2018
Mithilfe des Angular Reactive FormBuilder lassen sich schnell FormControls definieren und einer FormGroup zuordnen.
Hierbei fügt Angular die FormControls in das jeweilige Objekt unter controls an (z.B.: myFormGroup.controls).
Doch was ist, wenn man den Template Part mittels *ngFor realisierieren möchte und ein eigenes dynamische Formular aufbauen möchte?

Angular Component Library mit ng-packagr erstellen

erstellt: 29.04.2018
Das Erstellen einer Angular Component Library mittels ng-packagr erlaubt das einfache Wiederverwenden und Extrahieren von Angular Modulen und Components.
Nach dem Erstellen lässt sich die Component Library lokal mittels "npm pack" installieren.

Angular - Dynamische Component erzeugen

erstellt: 20.05.2017
Das Erzeugen einer dynamischen Component in Angular erlaubt das Hinzufügen eines Templates zur Laufzeit und ermöglicht so ein asynchrones Hinzufügen von zuvor nicht deklarierten Componenten und NgModules.

Angular Custom Pipe OrderBy erstellen

erstellt: 12.04.2017
Eine Angular Custom Pipe ermöglicht das Definieren von weiterer Funktionalität, welche z.B.: beim Iterieren von Einträgen genutzt werden kann.
Hier wird eine injectable Custom Pipe erstellt, welche sowohl im View als auch in einer anderen Component genutzt werden kann.
Für das Sortieren wird eine einfache ".sort" Methode implementiert, die beliebig erweitert werden kann.
Zu beachten ist hier "transform", welche Zugriff auf die zu iterierende Einträge und weitere Parameter ermöglicht.

Angular Input File als Component auslagern

erstellt: 15.01.2017
Durch das Auslagern von dem File Input in eine eigene Angular Component lässt sich redundanter Code vermeiden.
Zusätzlich ist man in der Lage andere Elemente zu nutzen, die sich stylen lassen was bei dem File Input nur bedingt möglich ist.

Angular - Component Library erstellen

erstellt: 14.01.2017
Das Erstellen einer Angular Component Library erlaubt das einfache Wiederverwenden von Javascript Code.
Nach dem Erstellen hosten wir die Component Library auf GitHub um sie später in anderen Projekten installieren zu können.