Интерполяция

механизм, который позволяет вставлять значения свойств компонентов в HTML-шаблоны

Определить данные в компоненте

Определите данные, которые вы хотите использовать в шаблоне, например:
```
readonly name = 'Катерина | Про Frontend';
```
Использовать интерполяцию в HTML-шаблоне
```
<p>Полезный канал про Frontend: {{ name }}!</p>
```

@Input()

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

Импортировать декоратор @Input из библиотеки @angular/core:
```
import { Input } from '@angular/core';
```
Добавить декоратор @Input к свойству дочернего компонента, которое будет принимать данные:
```
@Input() propertyName: propertyType;
```
Здесь propertyName - это имя свойства, которое будет использоваться в дочернем компоненте для передачи данных, а propertyType - тип данных, которые оно может принимать.
В родительском компоненте передать данные в дочерний компонент, используя свойство, помеченное декоратором @Input:
```
<app-child [propertyName]="parentData"></app-child>
```

Опции декоратора:

alias

Позволяет задать альтернативное имя для свойства в дочернем компоненте.

Это может полезно, если вы хотите изменить имя свойства, чтобы оно было более понятным или совпадало с уже существующими именами в вашем коде

@Input('customName') myProperty: string;

// c v16
@Input({
  alias: 'customName'
}) myProperty: string;

В этом примере myProperty будет доступно в шаблоне дочернего компонента как customName.

required

указывает, что свойство должно быть обязательно передано из родительского компонента

Если свойство не будет передано, Angular сгенерирует ошибку

// 15 и ниже
@Component({
  selector: 'app-profile[name]',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProfileComponent {
  @Input() name!: string;
  
  // c v16
	@Input({
	  required: true
	}) name!: string;
}