Bindings – Kommunikation zwischen Template und Logik (Folge 4)

Bindings erlauben die Kommunikation zwischen HTML Datei und TypeScript Klasse. In dieser Folge des Happy Angular Podcasts schauen wir uns String Interpolation, Property Binding, Event Binding, Two-Way Binding und drei weitere Bindings an. Du erhältst drei wertvolle Tipps, wie Fehler mit Bindings vermeidest und einfacher mit leeren Werten wie null und undefined umgehen kannst. In der Podcast Episode erhältst du weitere hilfreiche Ergänzungen.

String Interpolation

Die Ausgabe von Variablen als String im Template erfolgt mit String Interpolation. Die Kommunikation erfolgt dabei von der TypeScript Klasse zur HTML Datei. Methoden und Ausdrücke werden erst evaluiert und dann zum String konvertiert.

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

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

  name = 'Happy Angular';
}

Property Binding

Das Verbinden einer Variable mit einer DOM Property, HTML Attributen oder Direktiven bzw. Komponenten Properties erfolgt mit Property Binding. Die Kommunikationsrichtung geht von der TypeScript Klasse zur HTML Datei.

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

@Component({
  selector: 'app-happy-angular',
  template: `<img [src]="pfad"/>`
})
export class HappyAngularComponent {

  pfad = 'https://happy-angular.de/wp-content/uploads/2018/04/logo_color_text-2.svg';
}

Event Binding

Durch Event Binding kann auf Events reagiert werden. Die Quelle der Events kann der Benutzer oder eine Kinder-Komponenten bzw. Direktiven sein. Bei dieser Binding-Art erfolgt die Kommunikation vom Template zur TypeScript Klasse und in dieser kann mit Hilfe einer Methode auf das Event antworten. Mit Hilfe von $event kann auf die Daten des Events zugegriffen werden.

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

@Component({
  selector: 'app-happy-angular',
  template: `
    <button (click)="onClick($event)">Hallo!</button>`
})
export class HappyAngularComponent {

  onClick(event: Event) {
    console.log('onClick', event);
  }
}

Two-Way Binding

Mit Two-Way Binding ist die Kommunikation vom Template zur Logik-Klasse und auch umgekehrt möglich. Es ist  Bestandteil des FormsModule (Template Driven Forms) und hat den Nutzen bei Formulareingaben.

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

@Component({
  selector: 'app-happy-angular',
  template: `
    <input name="vorname" [(ngModel)]="vorname"/>`
})
export class HappyAngularComponent {
  vorname: string;
}

Für die Nutzung von Two-Way Binding ist der Import von FormsModule notwendig.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HappyAngularComponent } from './happy-angular/happy-angular.component';

@NgModule({
  declarations: [
    AppComponent,
    HappyAngularComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

In der Podcast Episode sprechen wir außerdem Template Referenz Variablen, HostListener und HostBindings an. Den dazugehörigen Beispielcode findest bei den Shownotes der Komponenten.