Читать книгу Angular - Ferdinand Malcher - Страница 130

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>