Angular 2 component dynamic name

Question

How i can set dynamic name to angular 2 component?

I have next code in my template:

<{{component} [data]="data" [anotherData]="anotherData"></{{component}}>

And I want do define componentName in my class

component: string = 'component';

Because now i have next error:

Uncaught (in promise): Template parse errors:
Unexpected closing tag "{{component}" ("

A possible approach http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468 — Günter Zöchbauer, Jul 16 '16 at 20:57

score 3 · Answer 1 · answered Jul 16 '16 at 20:49

3

The Answer is simply You Can't !!

While defining your component you must have to declare name of that component(i.e selector property) as well as class name. without declaring component name you can't create component.

so in your case there are option is either you create no. of components and call whenever you need of that component or create dynamic input value of that component so as per need set your dynamic value and get usng @Input. because for each component there is diff. template and logic as well, so better is to create new components and use as per need.

yes no doubt you can set dynamically data to that component like ID's ,name, custom input etc etc. hope it clears everything if not comment here !

answered Jul 16 '16 at 20:49

Pardeep Jain

84,110
37
165
215

`ViewContainerRef.createComponent()` might be an option – Günter Zöchbauer Jul 16 '16 at 20:54
option for what ? usage of `ViewContainerRef.createComponent()` ? – Pardeep Jain Jul 16 '16 at 20:55
Adding different components – Günter Zöchbauer Jul 16 '16 at 20:56
sorry but i have no idea about this. will read about this surely :) you can edit my answer if you have some extra clerification about this answer. – Pardeep Jain Jul 16 '16 at 20:58
I'm currently on my phone. I added a link in a comment below the question. – Günter Zöchbauer Jul 16 '16 at 20:59

score 3 · Accepted Answer · answered Jul 16 '16 at 23:18

<div  [ngSwitch]="contactService.contact.cat">
        <div *ngSwitchWhen="'person'">
            <persons-edit [primary]="true"></persons-edit>
        </div>
        <div *ngSwitchWhen="'business'">
            <businesses-edit [primary]="true"></businesses-edit>
        </div>
        <div *ngSwitchWhen="'place'">
            <places-edit [primary]="true"></places-edit>
        </div>
    </div>

This is what I use in my app. I have the three components defined, and use a switch to show the one I want. I get the selection here from a service, but you could get it from your root component. Something like this:

@Component {
  selector: 'dynamic-component',
  ....
}

export class DynamicComponent{
@Input selectedcomponent : string;

}

Then use it in a template:

<dynamic-component [selectedcomponent]="person"></dynamic-component>

And instead of using a service, switch on "selectedcomponent".

score 1 · Answer 3 · answered Jul 16 '16 at 13:38

1

You cannot dynamically assign names to components the way you try to do it. However, you can dynamically assign ids to your elements with [attr.id]="id_string_expression" Most likely you can solve your problem that way. Something like:

<my-component [attr.id]="name+number" [data]="data" [anotherData]="anotherData"></my-component>

answered Jul 16 '16 at 13:38

hholtij

2,906
6
27
42

It doesn't help me. Because I want to insert different components. For example 'component' could be 'book' or 'article'. And a want to render needed component in template. – John Doe Jul 16 '16 at 14:00
In that case have a look at *ngIf. – hholtij Jul 16 '16 at 14:26
Yes. But it can not helps me/ – John Doe Jul 16 '16 at 14:28

Angular 2 component dynamic name

3 Answers3