Как передать параметр из родительского компонента в дочерний?

Для передачи параметра из родительского компонента в дочерний компонент в Angular мы можем использовать механизм входных свойств (input properties).

  1. В родительском компоненте определяем свойство, которое будет передаваться в дочерний компонент:
export class ParentComponent {
  parameter: string = 'Hello';

  constructor() { }
}
  1. В шаблоне родительского компонента добавляем дочерний компонент и передаем ему значение параметра:
<app-child [childParameter]="parameter"></app-child>
  1. В дочернем компоненте определяем входное свойство для получения значения параметра:
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{ childParameter }}</p>',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Input() childParameter: string;

  constructor() { }
}
  1. Теперь значение параметра передается из родительского компонента в дочерний компонент и может быть использовано в шаблоне дочернего компонента:
<p>{{ childParameter }}</p>

Таким образом, мы успешно передали параметр из родительского компонента в дочерний компонент с использованием механизма входных свойств в Angular.