2

Olá! Como inserir um código HTML dentro de um component no Angular? Por exemplo:

Tenho o component button:

cujo código é:

<button type="submit"></button>

gostaria de inserir o html desta forma:

<app-button>Teste</app-button>

de modo que o código do component fique assim, dinâmico:

<button type="submit">Teste</button>

Sei que é possível, porém ainda não encontrei como. Grato desde já.

2
  • Não é duplicada. Este tópico que você mencionou ensina a criação básica do componente, o que eu afirmei saber neste tópico. No caso a minha dúvida é sobre como inserir HTML dinamicamente dentro do componente.
    – Kohi
    Commented 21/01/2018 às 1:40
  • 1
    No template exemplo: <button type="submit">{{name}}</button>, no HTML <app-button name="ENVIAR"></app-button>, no component adicione dentro da classe @Input() name:string; e importe Input
    – NoobSaibot
    Commented 21/01/2018 às 2:17

2 Respostas 2

5
+50

Você está procurando pela tag ng-content ela permite que você acesse o que foi passado no corpo do component.

Exemplo:

import {Component} from '@angular/core';

@Component({
  selector: 'custom-component',
  template: `<button>
              <ng-content></ng-content>
              </button>`,
})
export class CustomComponent{

}

Utilizando o componente acima, você pode cria-lo e passar um texto no seu corpo.

<custom-component>BOTÃO CUSTOMIZADO </custom-component>

O Angular irá renderizar o seguinte html:

<custom-component>
   <button> BOTÃO CUSTOMIZADO </button>
</custom-component>

Criei um exemplo no stackblitz para você

3
  • Não conhecia esse método. Legal saber. Mas ainda prefiro utilizar como na minha resposta, pois assim eu tenho um melhor controle do template. Você teria algum exemplo que esse método seja melhor? Ou algo que indique quando é melhor utilizar esse método? Commented 26/01/2018 às 13:55
  • @celsomtrindade Na minha opinião faz mais sentido utilizar o ng-content para passar um html para dentro do template do seu componente. No caso da pergunta (Cenário muito simples), realmente faz mais sentido utilizar o @Input(). Um bom exemplo é a biblioteca Material que utiliza o ng-content nos seu componentes, por exemplo o mat-card Commented 26/01/2018 às 15:52
  • É, em cenários com um template mais complexo, realmente, o ng-content seria melhor. Sempre que precisei fazer algo assim preferi utilizar um novo componente ao enviar um template. Mas foi bom conhecer esse método. Commented 26/01/2018 às 17:04
4

Você deve criar uma variável para receber os valores dentro do component. Veja esse exemplo:

@Component({
    selector: 'app-button',
    template: `
        <button type="submit">{{label}}</button>
    `,
})

export class AppButtonComponent {
    @Input() label: string;
}

Isso irá fazer com que você precise declarar a variável label no momento em que for criar o componente, assim:

<app-button [label]="'Teste'"></app-button>

Note que eu declarei o nome "Teste" dentro de aspas simples, pois estou declarando ela manualmente. Se fosse uma outra variável dentro do seu outro component, você poderia passar a variável diretamente, sem a necessidade de aspas, assim:

<app-button [label]="minhaVariavel"></app-button>

Observação: Você não consegue declarar nada dentro da declaração de app-button pois, ao renderizar, o Angular irá substituir o que você declarou manualmente pelo que foi declarado na propriedade template ou templateUrl.

3
  • Saquei. Em alguns projetos vi algo do tipo: <div class="panel"><div class="panel-title">Teste</div><div class="panel-body">Conteúdo</div></div>. Esse era o template do componente. Fizeram algo do tipo <app-theme-painel>Conteúdo</app-theme-painel>. No caso o que ficava entre as tags entravam na div body do painel. O código assim ficou mais resumido. Algo tipo o slot e yield no laravel, sabe? Como isso foi possível?
    – Kohi
    Commented 22/01/2018 às 0:53
  • @WallaceMagalhães você tem algum exemplo disso? Pois nunca vi esse tipo de interação em Angular. O máximo que sei que é possível fazer seria a declaração de templateUrl, que você cria um arquivo .html com o seu template e o Angular ira compilar para Javascript. Em AngularJs (versão 1) eu sei que era possível algo semelhante a isso (não sei se ainda é pois não uso faz algum tempo já). Commented 22/01/2018 às 10:17
  • Tenho sim, olha aqui: mika-el.github.io/angular-admin-lte/#/alert olha o código do alert. Ele meio que insere o html entre as tags do componente
    – Kohi
    Commented 25/01/2018 às 14:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .