Componentes dinâmicos

Nesta lição, você aprenderá a carregar componentes dinamicamente no Angular para criar aplicações flexíveis.

O que são componentes dinâmicos?

Os componentes dinâmicos são carregados na visualização em tempo de execução, em vez de serem declarados diretamente em um modelo.

Por que usar componentes dinâmicos?

• Renderização flexível da interface do usuário
• Exibição condicional de componentes
• Criação de painéis ou janelas modais dinâmicos

Criando um espaço reservado

Use <ng-container> como um espaço reservado para carregar componentes dinâmicos:

<ng-container #dynamicContainer></ng-container>

Usando ViewChild

Acesse o contêiner usando @ViewChild na classe do seu componente:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

Carregando componentes dinamicamente

Use o resolvedor da fábrica de componentes para criar e inserir componentes:

const componentRef = this.container.createComponent(MyDynamicComponent);

Passando dados para componentes dinâmicos

Passe dados ao seu componente criado dinamicamente usando entradas:

componentRef.instance.data = 'Hello Dynamic';

Removendo componentes dinâmicos

Você pode remover facilmente os componentes dinâmicos do DOM:

this.container.clear();

Resumo

Agora você sabe como criar, gerenciar e remover componentes dinamicamente no Angular. Excelente trabalho!