События

Event Binding

Синтаксис: (event)="function()"

\app\servers\servers.component.html:

<button 
class="btn btn-primary"
[disabled]="disallowNewServer"
(click)="onServerCreate()">
Add Server</button>
<p [innerText]="serverStatus"></p>

\app\servers\servers.component.ts:

export class ServersComponent implements OnInit {
disallowNewServer = true;
serverStatus = "Server is OFF";
...
onServerCreate() {
this.serverStatus = "Server is ON";
}
}

Передача и использование данных с помощью event Binding

\app\servers\servers.component.html:

<input
type="text"
class="form-control"
(input)="onUpdateServerName($event)">

<p>{{ serverName }}</p>

\app\servers\servers.component.ts:

serverName = '';
onUpdateServerName(event: Event) {
this.serverName = (<HTMLInputElement>event.target).value;
}

(<HTMLInputElement>event.target) - для приведения типа. Это синтаксис для информирования TypeScript о типе переменной. Интерфейс HTMLInputElement является частью Web Api и обеспечивает свойства и методы для манипулирования версткой и представлением элемента input. Подробнее о нем можно прочитать на MDN.

Источник – курс «Angular 5 the complete guide», Maximilian Schwarzmüller
Редактировать на GitHub