How to insert HTML within an Angular 4 Component?

Question

How to insert HTML within an Angular 4 Component?

Asked 7 years, 9 months ago

Viewed 3,047 times

2

Hello! How to insert an HTML code into an Angular Component? For example:

I have the Component button:

whose code is:

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

I would like to insert the html in this way:

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

so that the Component code looks like this, dynamic:

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

I know it’s possible, but I haven’t found it yet. Grateful from now on.

It’s not duplicated. This topic you mentioned teaches the basic component creation, which I claimed to know in this topic. In case my question is about how to dynamically insert HTML into the component.

– Wallace Magalhães

2018/01/21 at 01:40
1

In the example template: <button type="submit">{{name}}</button>, in HTML <app-button name="ENVIAR"></app-button>, in the add Component within the class @Input() name:string; and import Input

– NoobSaibot

2018/01/21 at 02:17

2 answers

5

You’re looking for the tag ng-content it allows you to access what was passed in the body of the.

Example:

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

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

}

Using the above component, you can create it and pass a text in your body.

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

Angular will render the following html:

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

I created an example in stackblitz for you

I didn’t know this method. Cool to know. But I still prefer to use it as in my answer, because then I have a better control of the template. Would you have an example that this method is better? Or something that indicates when it is best to use this method?

– celsomtrindade

2018/01/26 at 13:55
@celsomtrindade In my opinion it makes more sense to use the ng-content to pass an html into your component’s template. In the case of the question (Very simple scenario), it actually makes more sense to use the @Input(). A good example is the Material library that uses ng-content in its components, for example mat-card

– André Roggeri Campos

2018/01/26 at 15:52
Yeah, in scenarios with a more complex template, really, the ng-content would be better. Whenever I needed to do something like this I preferred to use a new component when submitting a template. But it was nice to know this method.

– celsomtrindade

2018/01/26 at 17:04

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.

by celsomtrindade • **8,038** points · Answer 1 · 2018-01-21T11:52:09+00:00

You must create a variable to receive the values within the Component. See this example:

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

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

This will make you need to declare the variable label the moment you create the component, like this:

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

Note that I declared the name "Test" in single quotes, as I am declaring it manually. If it were another variable inside your other Komponent, you could pass the variable directly, without the need for quotation marks, like this:

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

Observing: You cannot declare anything within the declaration of app-button because, when rendering, Angular will replace what you manually declared with what was declared in the property template or templateUrl.