Angular 6 multiple ng-content

Postado em por Wolmir Cezer Garbin em Angular | 160 Visualizações
Última atualização em:

Este post trata de múltiplas transclusões e slots nomeados que estão disponíveis em Angular para tratar múltiplos conteúdos usando

Todo mundo tem algo para vender, AnuncieOn.com o melhor site de anúncios grátis de todo o Brasil.

Para iniciar o entendimento, transclusão é a inclusão de conteúdo de um documento em outro documento através de referência. No Angular é possível fazer múltiplas transclusões usando slots nomeados. Parece complicado mas na prática é muito simples.

Basicamente, o que faz é permitir que você especifique várias regiões dentro do modelo do seu componente, que podem ser fornecidas pelo usuário do componente. Este é um grande recurso que foi adicionado ao Angular 1.5.

Para entender melhor, vamos a um exemplo. Considere o componente TitleComponent que recebe um título e um sub-título.

//our root app component
import {Component} from '@angular/core'

@Component({
  selector: 'app-title',
  template: `
    <h1>
      <ng-content select="[principal]"></ng-content>
    </h1>
    <h3>
      <ng-content select="[auxiliar]"></ng-content>
    </h3>
    <p>Este é um exemplo de múltiplas transclusões com slots nomeados</p>
  `
})
export class TitleComponent {}


Note que se utilizar apenas o <ng-content> sozinho, não é necessário usar o recurso de múltiplas projeções de conteúdo. Caso contrário, é necessário usar a propriedade select, veja:

[...]
<ng-content select="[auxiliar]"></ng-content>
[...]

E para usar o componente app-title, faça:

<app-title>
    <div principal>Este é o título que vai para o H1</div>
    <div auxiliar>Este é o título auxiliar que vai para o H3</div>
</app-title>

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

FIQUE POR DENTRO

Receba as novidades todo mês em seu e-mail!

Apoiadores


Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar