CODEWITHSUNDEEP
javascriptangulartypescript
Doua Beri
Doua Beri

Reputation: 10939

Angular 2 dynamically create html tag

Is there a way to dynamically create a html tag in components template?

Something like this

template:`<{{custom_tag}} [info]="info"></{{custom_tag}}>`
...
this.custom_tag="example";
this.info={};

Generated html will be something like this

<example info="..."></example>

Upvotes: 1

Views: 7123

Answers (2)

Neenu Chandran
Neenu Chandran

Reputation: 804

Sorry for the delay, but I'm adding my response:

Create a new component and now you can use that component selector tag itself inside wherever needed.

like;

@Component({
  selector: 'app-example',
})
export class ExampleComponent implements OnInit {}

Use selector as:

<app-example></app-example>

Pass parameters to the new component as:

 <app-example [param]="abc"></app-example>

This input param needs to be identified with the same identifier 'param' using @input() property.

Upvotes: -2

Pedro Silva
Pedro Silva

Reputation: 31

I had the same problem, I resolved with a directive to replace the tag:

https://stackoverflow.com/a/42049947/7383715

Upvotes: 3

Related Questions