Синтаксис: (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";
}
}
\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. Приложение строится из компонентов.
Централизация логики и упрощение коммуникации между компонентами с помощью сервисов.
Создание кастомных событий и их обработчиков. Импорт свойств родительского компонента.