Дочерние компоненты в Angular

Как упоминалось в самом начале учебника, в Angular весь проект разбивается на компоненты. В предыдущих уроках мы работали только с основным компонентом, созданным по умолчанию. Давайте теперь научимся создавать дочерние компоненты.

Код новых компонентов автоматически генерируется Angular с помощью специальной команды терминала: generate component. После слова component нужно написать имя нашего нового компонента. Пусть мы хотим сгенерировать компонент user:

ng generate component user

После выполнения команды мы увидим, что у нас появилась новая папка app/user. В ней будут находиться все стандартные файлы компонента.

В файле с компонентом user.component.ts будет автоматически создан декоратор компонента:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Также в этом файле будет автоматически создан класс компонента:

export class UserComponent {

}

Теперь наш дочерний компонент нужно подключить к родительскому. Пусть родительским будет компонент app, изначально присутствующий при установки фреймворка. Импортируем в него наш компонент:

import { UserComponent } from './user/user.component';

В декораторе компонента в ключе imports укажем наш имортированный компонент:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // тут
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Теперь мы можем вывести содержимое дочернего компонента в родительском. Для этого в файле с темплейтом родителя нужно написать специальный тег, имя которых задано в свойстве selector декоратора @Component потомка. В нашем случае это тег app-user. Напишем его в темлейте родителя:

some text
<app-user></app-user>

Сгенерируйте компонент ProductComponent. Подключите этот компонент к главному компоненту вашего проекта.

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

Поменяйте CSS стили дочернего компонента. Убедитесь, что они применятся в браузере.

В дочернем компоненте сделайте свойства name и price. Выведите их значения в темплейте дочернего компонента.