Image Headline

Zoom-Headline-Component

Diese Komponente wird nach der persönlichen Frage - Komponente aufgerufen. Sie zeigt die Auswahl in Groß als Überschrift.

Aufbau

Die Komponente besteht aus dem darzustellenden Bild und dem Hintergrundbild des Kapitels. Beide Bildpfade können an die Komponente übergeben werden, wodurch sie in jedem Kapitel wiederverwendet werden kann.

Verwendung

In der entsprechenden .ts Datei kann die Komponente wie folgt erstellt werden:

zoomHeadlineImage: HeadlineImage[] = [];
ngOnInit(): void {
    let headlineImageMeat = HeadlineImage.createWith('assets/images/zoom-headline/fleisch.png', 'assets/images/zoom-headline/kapitel1_table_background.png' );
    this.zoomHeadlineImage.push(headlineImageMeat);
}

An die createWith() Methode werden die Bildpfade für das headlineImage und das backgroundImage übergeben.

In der .html Datei wird die Komponente wie im unten stehenden Beispiel eingefügt:

<app-zoom-headline [headlineImages]="zoomHeadlineImage"></app-zoom-headline>