Componentes Aninhados - Angular

Além dos componentes principais em uma aplicação, também podemos definir componentes auxiliares que gerenciam uma parte específica da marcação HTML. Em uma página, é comum termos diversos blocos com tarefas específicas, e para cada um desses blocos podemos criar um componente separado para simplificar o gerenciamento.

Vamos adicionar um segundo componente ao projeto. Para isso, criaremos um novo arquivo chamado child.component.ts na pasta src/app. No final, a estrutura do projeto ficará da seguinte forma:

helloapp/
├── src/
│   ├── app/
│   │   ├── app.component.ts
│   │   ├── child.component.ts
│   ├── main.ts  
│   ├── index.html 
├── angular.json    
├── package-lock.json
├── package.json
└── tsconfig.json

No arquivo child.component.ts, vamos definir o seguinte código:

import { Component } from "@angular/core";
      
@Component({
    selector: 'child-comp',
    standalone: true,
    template: `<h2>ChildComponent Header</h2>`
})
export class ChildComponent {}

Aqui, definimos a classe ChildComponent. Para transformar essa classe em um componente, é necessário aplicar o decorador @Component. Vale ressaltar que este componente foi definido como autônomo (standalone: true).

O componente gerenciará a marcação HTML que será inserida no elemento child-comp, onde apenas um cabeçalho será exibido.

Agora, vamos definir no arquivo app.component.ts o código do componente principal da aplicação, o AppComponent:

import { Component } from "@angular/core";
import { ChildComponent } from './child.component';
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [ChildComponent],
    template: `<h1>AppComponent Header</h1>
        <child-comp></child-comp>`,
})
export class AppComponent {}

Este é o componente principal que será iniciado ao carregar a aplicação, e através dele utilizaremos os demais componentes. O ChildComponent será carregado no elemento child-comp. No template do AppComponent, esse elemento foi definido. O AppComponent também pode definir seu próprio conteúdo. No entanto, para usar o ChildComponent, é necessário importá-lo:

import { ChildComponent } from './child.component';
//..................................
  
imports: [ChildComponent],

No arquivo main.ts, cujo código é executado ao carregar a aplicação, o AppComponent é carregado:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent);

Assim, ao carregar a aplicação, o componente principal será carregado, o qual, por sua vez, carregará o ChildComponent:

Ao utilizar componentes filhos, é importante lembrar que eles formam seu próprio contexto, no qual definem suas variáveis, funções, estilos, etc. Por exemplo, vamos definir o seguinte código no arquivo child.component.ts:

import { Component } from "@angular/core";
      
@Component({
    selector: 'child-comp',
    standalone: true,
    template: `<h2>Hello from {{name}}!</h2>`,
    styles: [`h2{color:red;}`]
})
export class ChildComponent { 
    name = "ChildComponent";
}

Aqui, o template do componente exibe no cabeçalho o valor da variável name, definida na classe do componente. Além disso, foram definidos estilos para o elemento h2.

Agora, vamos modificar o código do AppComponent no arquivo app.component.ts:

import { Component } from "@angular/core";
import { ChildComponent } from './child.component';
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [ChildComponent],
    template: `<h2>Hello from {{name}}</h2>
                <child-comp></child-comp>`,
    styles: ["h2 {color:black;}"]
})
export class AppComponent { 
    name = "AppComponent";
}

No AppComponent, também foi definida uma variável name, mas com um valor diferente. Além disso, o componente define o estilo para o cabeçalho h2.

E, ao executarmos o projeto, veremos que os estilos de um componente não se aplicam ao outro. Cada componente define sua própria área com o template, sua própria representação que ele gerencia.

Além disso, cada componente usa seu próprio valor da propriedade name. Ou seja, os componentes existem de forma relativamente independente.

ng-content

O elemento ng-content permite que componentes pai injetem código HTML nos componentes filhos. Vamos modificar o ChildComponent da seguinte forma:

import { Component } from "@angular/core";
       
@Component({
    selector: 'child-comp',
    standalone: true,
    template: `<ng-content></ng-content>
            <p>Hello from {{name}}!</p>`,
    styles: [`h2 {color:red;}`]
})
export class ChildComponent { 
    name = "ChildComponent";
}

No lugar do elemento <ng-content>, será possível passar qualquer conteúdo externo.

E vamos alterar o código do componente principalAppComponent:

import { Component } from "@angular/core";
import { ChildComponent } from './child.component';
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [ChildComponent],
    template: `<child-comp><h2>Hello from {{name}}</h2></child-comp>`,
    styles: ["h2 {color:black;}"]
})
export class AppComponent { 
    name = "AppComponent";
}

No elemento <child-comp>, é passado o cabeçalho <h2>Hello from {{name}}</h2>. Este cabeçalho será então inserido no componente filho ChildComponent no local do <ng-content>:

nesse caso, o gerenciamento dos estilos que são aplicados ao conteúdo injetado é feito pelo componente pai.