Komponente – Bausteine deiner Webanwendung (Folge 3)

Als ersten Grundbaustein in Angular schauen wir uns heute die Komponente an. Die Komponente ist ein elementarer Baustein und definiert den Inhalt deiner Anwendung. Jede Komponente besteht aus zwei Bestandteile: Template und Logik. Das Template beantwortet mit einer HTML Datei die Frage, wie einen Komponente aussehen soll. Das Verhalten und der Inhalt wird durch eine TypeScript Klasse definiert (Logik). Es gibt grundsätzlich zwei Arten, wie eine Komponente verwendet werden kann: Wiederverwendbar und spezifisch. In einer wiederverwendbaren Komponente wird das Aussehen und Verhalten festgelegt und der Inhalt von außen mit Hilfe von Inputs gesetzt. In einer spezifischen Komponente wird darüber hinaus auch der Inhalt definiert.

Technisch gesehen ist eine Komponente eine TypeScript Klasse mit einem Decorator.

import { Component } from '@angular/core';

@Component({
  selector: 'app-happy-angular',
  template: `<h1>Happy Angular</h1>`
})
export class HappyAngularComponent {

}

In dem Decorator werden Metadaten, wie der Pfad zum Template und Styles sowie der Komponenten-Selektor, definiert. Durch den Selektor wird definiert, wo die Komponente dargestellt werden soll. Typischerweise wird eine Komponente wie eine HTML-Datei eingebunden.

Konfigurationen von Darstellung, Verhalten und Inhalten mit Inputs

Mit Hilfe von Inputs können Konfigurationen von Darstellung, Verhalten und Inhalten angeboten werden. Events können mit Hilfe von Outputs an die Eltern-Komponente weitergegeben werden.

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-happy-angular',
  template: `<h1>Happy Angular</h1>`
})
export class HappyAngularComponent {

  @Input() name: string;

  @Output() hallo = new EventEmitter<string>();

  onClick() {
    this.hallo.emit(name + ' sagt Hallo!');
  }
  
}

Durch NgContent ist der Zugriff auf den Inhalt innerhalb der Element-Tags möglich und dadurch kann von der übergeordneten Komponente HTML Code definiert werden, welcher in der untergeordneten Komponente verwendet werden kann.

import { Component } from '@angular/core';

@Component({
  selector: 'app-happy-angular',
  template: `<h1>Happy Angular</h1>
  <ng-content></ng-content>`
})
export class HappyAngularComponent {

}

HostListener & HostBinding

Der Decorator HostLisitener bietet einen einfachen Weg Events, wie mouseover, zu erkennen und eine Methode als Reaktion auszuführen. HostBinding erlaubt direkten Zugriff DOM-Properties: lesend und schreibend.

import { Component, HostBinding, HostListener } from '@angular/core';

@Component({
  selector: 'app-happy-angular',
  template: `<h1>Happy Angular</h1>`
})
export class HappyAngularComponent {

  @HostBinding('class.active') private isActive: boolean;

  @HostListener('mouseover') onHover() {
    console.log('Maus über der HappyAngularComponent.');
    this.isActive = true;
  }

}

ViewChild & ContentChild

Zugriff auf DOM-Objekte gelingt durch ViewChild. Entweder die gewünschte Angular Komponente als Typ angeben oder mit Hilfe der Template Referenz Variable. Mit ContentChild kann auf DOM-Objekte im NgContent Bereich zugegriffen werden und funktioniert analog zu ViewChild.

import {Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'app-happy-angular',
  template: `<h1 #title>Happy Angular</h1>`
})
export class HappyAngularComponent {

  @ViewChild('title') titleElement: ElementRef;

}

Erzeugung einer Komponente mit der Angular CLI

ng generate component HappyAngular