1

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>
Doua Beri
  • 10,612
  • 18
  • 89
  • 138
  • By custom html tag you actually mean a component? Is this question about dynamic components? – Peter Matisko Feb 27 '17 at 21:33
  • @PeterMatisko yes. that tag will be a component – Doua Beri Feb 27 '17 at 23:54
  • 1
    I was solving a similar problem. Please check my question and answer, it might help: http://stackoverflow.com/questions/42215288/angular2-dynamic-components-in-content-received-by-api You need to employ a compiler to add components dynamically. – Peter Matisko Feb 28 '17 at 21:14

2 Answers2

3

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

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

Pedro Silva
  • 31
  • 6
-2

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.

Neenu Chandran
  • 722
  • 1
  • 6
  • 18