Angular 2: dynamic selector property

Question

I'm currently trying to see if in Angular 2 we can create dynamic selectors/html tags. For example, I want to do something like this:

@Component({
    selector: 'my-app' + 'variableName',
    template: `
    <container> </container>
    `,
    directives: [ContainerComponet]
})

So that I could do something like:

<my-app + {{variableName}}> <!-- the variable name would be coming from a public variable inside my component-->

In a way, the implementation of my component needs to happen several times, I know I can copy/paste what I have and have multiple components however I feel there has to be a smarter way to go.

Answer 1

This worked for me, in my case the template was identical but it needed to changed(coloring changes) based on certain values. So in the parent component these values were set and based on that my component behaved differently

Componenet code:

sample.ts

@Component({
    selector: 'my-app-sample' 
    templateUrl: 'sample.html'
})

 @Input() myInput: MyInput;

This component and template (sample.ts), is a child of another component. In the parent template we "drop" teh sample selector: my-app-sample

Template where I drop my selector (parent):

<div>
<my-app-sample [myInput] = "anotherVariable"</my-app-sample>
</div>

Note: the anotherVariable value is set in the Component parent.