Selectors

Grundlagen - Component Selectors

Definition und Zweck

Verbindung von Template und Komponente

Der Selector ist Teil des @Component Dekorators und teilt Angular mit, welches HTML-Element (oder welches Attribut oder Klasse) als Platzhalter für die Komponente dient.

Wenn Angular das in einem Template verwendete Element findet, weiß es, dass hier die entsprechende Komponente eingefügt/aufgebaut werden soll.

Identifikation im DOM

Mit Hilfe des Selectors wird beim Kompilieren der Anwendung festgelegt, welche Elemente durch die jeweilige Komponente ersetzt bzw. erweitert werden.

Typen von Selektoren

Angular unterstützt verschiedene Arten von Component Selectors.

Element-Selektor

Der Element-Selektor ist die häufigste und einfachste Form. Er wird verwendet, um Komponenten als eigenständige HTML-Elemente zu definieren. Element-Selektoren werden ohne spezielle Präfixe definiert.

@Component({
    selector: 'app-hero-list',
    template: `
        <h2>Helden</h2>
        <ul>
            <li *ngFor="let hero of heroes">
                {{ hero }}
            </li>
        </ul>
    `
})
export class HeroListComponent {
    heroes = ['Superman', 'Batman', 'Wonder woman'];
}

<app-hero-list></app-hero-list>

Element-Selektoren sind ideal für eigenständige Komponenten wie Navigationsleisten, Karten, Listen, Bereiche, Formulare oder vergleichbar geeignet. Sie werden als eigene HTML-Elemente in das Template eingebunden und sind damit klar als abgegrenzte UI-Komponenten erkennbar.

Attribut-Selektoren

Attribut-Selektoren werden verwendet, um Komponenten als Attribute an bestehenden HTML-Elementen anzuwenden. Sie werden in eckigen Klammern [] definiert.

@Component({
    selector: '[app-hero-detail]',
    template: `<p>{{ heroName }}</p>`
})
export class HeroListComponent {
    @Input() heroName: string = '';
}

<div app-hero-detail heroName="Batman"></div>

Attribut-Selektoren sind besonders nützlich, wenn man das Verhalten oder Aussehen eines existierenden HTML-Elements erweitern möchte, ohne dessen grundlegende Struktur zu verändern. Sie eignen sich gut für Direktiven oder kleinere Erweiterungen wie Tooltips, Validierungen oder spezielle Formatierungen.

Klassen-Selektoren

Klassen-Selektoren in Angular werden verwendet, um Komponenten als CSS-Klassen auf HTML-Elementen anzuwenden. Sie werden mit einem Punkt . definiert.

@Component({
    selector: '.app-warning-msg',
    template: `<p>Warnung: {{ msg }}</p>`
})
export class HeroListComponent {
    @Input() msg: string = 'Standardwarnung';
}

<div
    class="app-warning-msg"
    msg="Benutzerdefinierte Warnung"
></div>

Klassen-Selektoren sind weniger häufig als die anderen beiden Arten, können aber nützlich sein, wenn man mehrere Komponenten auf ein Element anwenden möchte oder wenn man die Komponente als Teil eines bestehenden CSS-Klassensystems integrieren möchte.

Kombination von Selektoren

Angular erlaubt auch die Kombination mehrerer Selektoren für eine einzelne Komponente. Dies kann durch Kommas getrennte Selektoren in der Komponentendefinition erreicht werden.

@Component({
    selector: 'app-hero-btn, [hero-btn], .hero-btn',
    template: `<button>{{ label }}</button>`
})
export class HeroBtnComponent {
    @Input() label: string = 'Held hinzufügen';
}

<app-hero-btn label="Speichern"></app-hero-btn>

<button hero-btn label="Bearbeiten"></button>

<button class="hero-btn" label="Löschen"></button>

Selektoren mit Bedingungen

Fortgeschrittene Selektor-Muster ermöglichen es, Komponenten nur unter bestimmten Bedingungen anzuwenden. Hierbei werden CSS-ähnliche Selektor-Muster verwendet.

Elemente mit bestimmten Attributen

@Component({
    selector: 'button[hero-btn]',
    template: `<ng-content></ng-content>`
})
export class HeroBtnComponent {}

Diese Komponente wird nur auf Button-Elemente mit dem Attribut hero-btn angewendet.

<button hero-btn>Held speichern</button>

Elementen mit bestimmten Klassen

@Component({
    selector: 'div.alert',
    template: `<strong>Warnung:</strong> <ng-content></ng-content>`
})
export class AlertComponent {}

Diese Komponente wird nur auf div-Elemente mit der CSS-Klasse alert angewendet.

<div class="alert">Daten wurden geändert!</div>

Namenskonventionen für Selektoren

In Angular gibt es bewährte Praktiken für die Benennung von Selektoren.

1. Präfixe verwenden: Um Konflikte mit nativen HTML-Elementen und Drittanbieter-Komponenten zu vermeiden, sollten Angular-Komponenten-Selektoren ein Präfix bekommen. Standardmäßig verwendet das Angular CLI app- als Präfix, aber Projekte können ihr eigenes Präfix definieren.

2. Kebab-Case verwenden: Selektoren sollten im Kebab-Case-Format (mit Bindestrichen zwischen Wörtern) geschrieben werden, z.B. app-hero-detail statt appHeroDetail.

@Component({
    selector: 'acme-product-list',
    template: `<div>Produktliste</div>`
})
export class ProductListComponent {}