Читать книгу Angular - Manfred Steyer - Страница 64

Runde Klammern führen zu einer Bindung an Events. Dabei kann es sich sowohl um DOM-Events als auch um Erweiterungen von Frameworks wie Angular handeln. Das hier betrachtete Beispiel nutzt zwei Event-Bindings, um auf Mausklicks zu reagieren. Das eine Event-Binding verknüpft die Schaltfläche Search mit der Komponentenmethode search:

<button (click)="search()" [disabled]="!from || !to">

Search

</button>

Das andere Event-Binding ruft für einen der dargestellten Flüge die Methode select auf, um ihn als ausgewählten Flug vorzumerken:

<table class="table table-striped">

<tr *ngFor="let flight of flights"

[ngClass]="{ 'active': flight === selectedFlight }">

[...]

<td><a (click)="select(flight)">Select</a></td>

</tr>

</table>

Verwenden Sie das folgende Styling in der Datei src/styles.scss, damit der Browser auch für Anchor-Tags ohne href-Attribut (z.B. bei <a (click)="select(flight)">Select</a>) den typischen Mauscursor für klickbare Links (Zeigefingersymbol) verwendet: a { cursor: pointer; }