Работа с Angular 2 элементами через события и ссылки

В нашем шаблоне simple form заменим разметку на div, который содержит input и button теги внутри. Текст кнопки 'Нажми меня!'. После сохранения и обновления страницы браузера нам будет доступны поле ввода и кнопка.

simple-form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `<div>
<input type="text">
<button>Нажми меня!</button>
</div>`,
  styles: []
})

Для обработки нажатия на кнопку, необходимо указать название события и поместить его в круглые скобки, пример (click). Далее необходимо присвоить данному обработчику метод класса нашего компонента. Назовем метод onClick.

simple-form.component.ts

<button (click)="onClick()">Нажми меня!</button>

В нашем классе добавим метод onClick и просто вызовем console.log( 'clicked!' ) в теле. Сохраним код. Теперь после нажатия на кнопку, в консоль будет выводится текст 'clicked!'.

simple-form.component.ts

export class SimpleFormComponent implements ngOnInit {
  onClick(){
    console.log('clicked!');  // clicked!
  }
  constructor() { }
  ngOnInit() {
  }
}

Этот синтаксис оборачивание имени события в круглые скобки, работает со всеми DOM событиями. Добавим к нашему полю ввода символ решетка и myInput. Это будет ссылкой на наш элемент input.

simple-form.component.ts

<input #myInput type="text">
<button (click)="onClick()">Нажми меня!</button>

Понимая это, теперь мы имеем доступ к значениям элемента. Чтобы проверить, добавим myInput.value в наш обработчик нажатия на кнопку.

simple-form.component.ts

<input #myInput type="text">
<button (click)="onClick(myInput.value)">Нажми меня!</button>

Назовем параметр value и выведем его в функции log. После сохранения, значение поля ввода будет выводиться в консоль. Если ввести текст в поле и нажать на кнопку, мы увидим это.

simple-form.component.ts

onClick(value){
    console.log(value);  // type
                         // something else
  }

Таким образом, при помощи комбинации событий и ссылок, мы можем получать доступ к элементам и их значениям. А так же управлять ими так, как необходимо нашему приложению.