Componentes filhos no Angular

Como mencionado no início do tutorial, no Angular, todo o projeto é dividido em componentes. Nas lições anteriores, trabalhamos apenas com o componente principal, criado por padrão. Vamos agora aprender a criar componentes filhos.

O código dos novos componentes é gerado automaticamente pelo Angular por meio de um comando especial do terminal: generate component. Após a palavra component, precisamos escrever o nome do nosso novo componente. Suponha que desejamos gerar um componente user:

ng generate component user

Após executar o comando, veremos que uma nova pasta app/user foi criada. Ela conterá todos os arquivos padrão de um componente.

No arquivo do componente user.component.ts, um decorador de componente será criado automaticamente:

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

Além disso, neste arquivo, uma classe do componente será criada automaticamente:

export class UserComponent {

}

Agora, nosso componente filho precisa ser conectado ao componente pai. Suponha que o pai seja o componente app, presente inicialmente na instalação do framework. Vamos importar nosso componente para ele:

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

No decorador do componente, na chave imports, especificaremos nosso componente importado:

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

Agora podemos exibir o conteúdo do componente filho no componente pai. Para isso, no arquivo de template do pai, precisamos escrever uma tag especial, cujo nome é definido na propriedade selector do decorador @Component do filho. No nosso caso, é a tag app-user. Vamos escrevê-la no template do pai:

algum texto
<app-user></app-user>

Gere o componente ProductComponent. Conecte este componente ao componente principal do seu projeto.

Faça alterações no template do componente filho. Certifique-se de que elas são aplicadas no navegador.

Altere os estilos CSS do componente filho. Certifique-se de que eles são aplicados no navegador.

No componente filho, crie as propriedades name e price. Exiba os seus valores no template do componente filho.