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

Eine Komponente ist immer mit einem Template verknüpft. Das Template ist der Teil der Komponente, den der Nutzer sieht und mit dem er interagieren kann. Für die Beschreibung wird meist HTML verwendet¹, denn wir wollen unsere Anwendung ja im Browser ausführen. Innerhalb der Templates wird allerdings eine Angular-spezifische Syntax eingesetzt, denn Komponenten können weit mehr, als nur statisches HTML darzustellen. Diese Syntax schauen wir uns im Verlauf dieses Kapitels noch genauer an.

Um eine Komponente mit einem Template zu verknüpfen, gibt es zwei Wege:

 Template-URL: Das Template liegt in einer eigenständigen HTML-Datei, die in der Komponente referenziert wird (templateUrl).

 Inline Template: Das Template wird als (mehrzeiliger) String im Quelltext der Komponente angegeben (template).

Eine Komponente besitzt genau ein Template.

In beiden Fällen verwenden wir die Metadaten des @Component()-Decorators, um die Infos anzugeben. Im Listing 6–3 sind beide Varianten zur Veranschaulichung aufgeführt. Es kann allerdings immer nur einer der beiden Wege verwendet werden, denn eine Komponente besitzt nur ein einziges Template. Die Angular CLI legt stets eine separate Datei für das Template an, sofern wir es nicht anders einstellen. Das ist auch die Variante, die wir Ihnen empfehlen möchten, um die Struktur übersichtlich zu halten.

@Component({

// Als Referenz zu einem HTML-Template

templateUrl: './my-component.html',

// ODER: als HTML-String direkt im TypeScript

template: `<h1>

Hallo Angular!

</h1>`,

// [...]

})

export class MyComponent { }