ContentChild e ContentChildren

• ContentChild e ContentChildren

No Angular 17, @ContentChild e @ContentChildren são decoradores que permitem acessar elementos filhos de um componente que são definidos dentro do conteúdo projetado de outro componente. Isso significa que, ao invés de acessar os filhos que são diretamente declarados no template do componente, esses decoradores são usados para acessar filhos que são passados ao componente de fora, usualmente usando a técnica de projeção de conteúdo com <ng-content>. Vamos explorar cada um deles:

@ContentChild

• Uso: O decorador @ContentChild é usado para obter a primeira instância de um elemento filho ou diretiva do conteúdo projetado no componente.

• Como funciona: Você pode usar @ContentChild para acessar um componente filho, uma diretiva ou um elemento DOM baseando-se em um seletor de classe, diretiva ou referência de template local.

• Exemplo: Suponha que você queira acessar um componente #childComponent que é passado no conteúdo de um componente pai:

  @Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`
  })
  export class ParentComponent {
    @ContentChild('childComponent') childComponent: ChildComponent;
  
    ngAfterContentInit() {
      // Acesso ao childComponent depois que o conteúdo é projetado
      console.log(this.childComponent);
    }
  }
  

@ContentChildren

• Uso: O decorador @ContentChildren é usado para obter uma QueryList contendo todas as instâncias de elementos filhos ou diretivas do conteúdo projetado.

• Como funciona: Similar ao @ContentChild, mas em vez de retornar apenas o primeiro elemento correspondente, ele retorna todos os elementos que correspondem ao seletor especificado.

• Exemplo: Para acessar todos os componentes filhos com a diretiva appChildDirective projetados dentro de um componente:

  @Component({
    selector: 'app-parent',
    template: `<ng-content></ng-content>`
  })
  export class ParentComponent {
    @ContentChildren(AppChildDirective) children: QueryList<AppChildDirective>;
  
    ngAfterContentInit() {
      // Acesso a todos os elementos com AppChildDirective
      this.children.forEach(child => console.log(child));
    }
  }
  

<!-- app.component.html -->
<app-parent>
  <div appChildDirective>Child 1</div>
  <div appChildDirective>Child 2</div>
</app-parent>