ein. Zwei elementare Konzepte – die Property und Event Bindings – schauen wir uns dabei sehr ausführlich an.
Die Grundlagen von Angular sind umfangreich, deshalb müssen wir viel erläutern, bevor es mit der Implementierung losgeht. Aller Anfang ist schwer, aber haben Sie keine Angst: Sobald Sie die Konzepte verinnerlicht haben, werden sie Ihnen den Entwickleralltag angenehmer machen!
6.1Komponenten: die Grundbausteine der Anwendung
Wir betrachten in diesem Abschnitt das Grundkonzept der Komponenten. Auf dem Weg lernen wir die verschiedenen Bestandteile der Template-Syntax kennen. Anschließend entwickeln wir mit der Listenansicht die erste Komponente für unsere Beispielanwendung.
6.1.1Komponenten
Komponenten sind die Grundbausteine einer Angular-Anwendung. Jede Anwendung ist aus vielen verschiedenen Komponenten zusammengesetzt, die jeweils eine bestimmte Aufgabe erfüllen. Eine Komponente beschreibt somit immer einen kleinen Teil der Anwendung, z. B. eine Seite oder ein einzelnes UI-Element.
Hauptkomponente Eine Komponente besitzt immer ein Template.
Jede Anwendung besitzt mindestens eine Komponente, die Hauptkomponente (engl. Root Component). Alle weiteren Komponenten sind dieser Hauptkomponente untergeordnet. Eine Komponente hat außerdem einen Anzeigebereich, die View, in dem ein Template dargestellt wird. Das Template ist das »Gesicht« der Komponente, also der Bereich, den der Nutzer sieht.
An eine Komponente wird üblicherweise Logik geknüpft, die die Interaktion mit dem Nutzer möglich macht.
Komponente: Klasse mit Decorator @Component()
Das Grundgerüst sieht wie folgt aus: Eine Komponente besteht aus einer TypeScript-Klasse, die mit einem Template verknüpft wird. Die Klasse wird immer mit dem Decorator @Component() eingeleitet. Das Listing 6–1 zeigt den Grundaufbau einer Komponente.
Was ist ein Decorator?
Decorators dienen der Angabe von Metainformationen zu einer Komponente. Der Einsatz von Metadaten fördert die Übersichtlichkeit im Code, da Konfiguration und Ablaufsteuerung sauber voneinander getrennt werden. Angular nutzt Decorators, um den Klassen eine Bedeutung zuzuordnen, z. B. @Component(). Im Kapitel zu TypeScript auf Seite 47 gehen wir auf Decorators ein.
@Component({
selector: 'my-component',
template: '<h1>Hallo Angular!</h1>'
})
export class MyComponent { }
Listing 6–1 Eine simple Komponente
Metadaten Selektor
Dem Decorator werden die Metadaten für die Komponente übergeben. Beispielsweise wird hier mit der Eigenschaft template das Template für die Komponente festgelegt. Im Property selector wird ein CSS-Selektor angegeben. Damit wird ein DOM-Element ausgewählt, an das die Komponente gebunden wird.
Was ist ein CSS-Selektor?
Mit CSS-Selektoren wählen wir Elemente aus dem DOM aus. Es handelt sich um dieselbe Syntax, die wir in CSS-Stylesheets verwenden, um Elementen einen Stil zuzuweisen. In Angular nutzen wir den Selektor unter anderem, um eine Komponente an eine Auswahl von Elementen zu binden. In Tabelle 6–1 sind die geläufigsten Selektoren aufgelistet. Selektoren können kombiniert werden, um die Auswahl weiter einzuschränken. Die Möglichkeiten sind sehr vielfältig, und wir nennen an dieser Stelle nur einige Beispiele:
div.active – Containerelemente, die die CSS-Klasse active besitzen
input[type=text] – Eingabefelder vom Typ text
li:nth-child(2) – jedes zweite Listenelement innerhalb desselben Elternelements
| Selektor | Beschreibung |
| my-element | Elemente mit dem Namen my-element Beispiel: <my-element></my-element> |
| [myAttr] | Elemente mit dem Attribut myAttr Beispiel: <div myAttr="foo"></div> |
| [myAttr=bar] | Elemente mit dem Attribut myAttr und Wert bar Beispiel: <div myAttr="bar"></div> |
| .my-class | Elemente mit der CSS-Klasse my-class Beispiel: <div class="my-class"></div> |
Tab. 6–1 Geläufige CSS-Selektoren
Host-Element
Das Element, das durch den Selektor ausgewählt wurde, stellt dann die Logik und das Template der Komponente bereit und wird deshalb als Host-Element bezeichnet. Wir betrachten noch einmal das Listing 6–1: Verwenden wir das HTML-Element <my-component> in unserem Template, so wird Angular den vorherigen Inhalt des Elements mit dem neuen Inhalt der Komponente ersetzen. Das Element <my-component> wird das Host-Element für diese Komponente, und die Seite im Browser wird um folgende Elemente erweitert:
<my-component>
<h1>Hallo Angular!</h1>
</my-component>
Listing 6–2 Erzeugtes Markup für die Komponente MyComponent
Wir können dieses Element an beliebiger Stelle in unseren Templates verwenden – es wird immer durch die zugehörige Komponente ersetzt. Auf diese Weise können wir Komponenten beliebig tief verschachteln, indem wir im Template einer Komponente das Host-Element einer anderen einsetzen usw. Diese Praxis schauen wir uns im nächsten Kapitel ab Seite 102 genauer an.
Komponenten sollten nur auf Elementnamen selektieren.
Es ist eine gute Praxis, stets nur Elementnamen zu verwenden, um Komponenten einzubinden. Das Prinzip der Komponente – Template und angeheftete Logik – kann durch ein eigenständiges Element am sinnvollsten abgebildet werden. Wenn wir auf die Attribute eines Elements selektieren wollen, so sind Attributdirektiven ein sinnvoller Baustein. Wie das funktioniert
