Передача значений в компоненты через @Input

Вместо того, чтобы создавать список элементов, мы можем использовать наш app-simple-form элемент. Временно удалим {{message}}.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>
<ul>
  <app-simple-form *ngFor="let message of mail.messages">
  </app-simple-form>
</ul>
</div>`
})

Сохраним файл. И теперь для каждого сообщения будет создана форма в браузере. Внутри нашей формы добавим входной параметр для сообщения, через декоратор @Input.

simple-form.component.ts

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

export class SimpleFormComponent implements OnInit {
  @Input() message;
  onClick(event, value){
    console.log(event);
    console.log(value);
  }
  constructor() { }
  ngOnInit() {
  }
}

Теперь мы можем вывести сообщение над полем ввода. Для этого будем использовать знакомый нам синтаксис с фигурными скобками. Также добавим атрибут [message]. Квадратные скобки необходимы для передачи значения в компонент в одном направлении. Компонент получит значение и отобразит его в шаблоне.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>
<ul>
  <app-simple-form
    *ngFor="let message of mail.messages"
    [message]="message"
  >
  </app-simple-form>
</ul>
</div>`
})

Каждый раз, когда мы хотим передать значение в компонент, мы можем использовать синтаксис квадратных скобок для атрибута. Имя атрибута может быть любим, это же имя должно быть указано в конфигурации компонента с декоратором @Input().