Componentes Aninhados em 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 principal AppComponent:

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 </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.