Veröffentlicht am

Angular und das Binding

Wenn man aus der „einfachen“ Javascriptwelt kommt, dann kommen Begriffe, die bei Angular sehr wichtig sind, eher selten vor. Damit diese Begriffe schnell in Fleisch und Blut übergehen, möchte ich hier immer mal wieder solche aufführen, die mir anfangs immer längeres Nachdenken abtrotzen und nun wie selbstverständlich meinen Entwickleralltag bereichern.

Bindings

ist so ein Beispiel.

Ich gehe davon aus, dass bekannt ist, dass man innerhalb einer beliebigen Komponente Eigenschaften definieren kann, die man dann im Template der Komponente ausspielt. Eine ganz ganz einfache Variante der Root-Komponente habe ich hier mal als Beispiel hinterlegt:

/* defaults */
import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
/* / defaults */

export class AppComponent {
  /* Properties der Komponente, die im Rahmen des PROPERTY-BINDINGS an das Template gebunden werden */
  imgAlt = 'Alternativtext für das Bildchen';
  title = 'Test: Angular Grundbausteine';
  buttonText = 'Click me';

  /* click handler: ausgeführt im Rahmen des EVENT-BINDINGS. */
  clickHandler() {
    alert('Clicked');
  }

  /* button change handler: ausgeführt im Rahmen des TWO-WAY-BINDINGS. */
  buttonChangeHandler() {
    this.buttonText = 'You have clicked me, click me again';
  }
}

1. Property Binding

Hier werden Eigenschaften der Komponente an das Template – und hier an Eigenschaften (Properties) des DOM-Elements – gebunden.
In Listing 1 wird innerhalb der Komponente – in der Datei: app.component.ts – die Property imgAlt mit einem String befüllt und dann im Komponententemplate (Datei: app.component.html) an die alt-Property des img-Elements gebunden (siehe Listing 2).

 
<h2>Property Bindings</h2>

  
<h3>(alt-property wird mit der Komponenteneigenschaft propimgAlt überschrieben)
<pre>[alt]="imgAlt"</pre>
</h3>

  <img width="300" [alt]="imgAlt" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">

[.. es folgt in Kürze: Eventbinding]