Home Is it possible to insert component selector tags using string interpolation or property binding?

# Is it possible to insert component selector tags using string interpolation or property binding?

user9356978
1#
user9356978 Published in 2018-02-13 20:45:32Z
 Suppose I have 10 components having the selectors as (had to insert full stops for preventing them from being ommitted ) <. app-comp1 .> <. app-comp2 .> ... <. app-comp10 .> In the parent component I want to insert only one of the above ten based on a property having the name of the component. Eg. this.component = 'comp7' So I should only include <. app-comp7 .> P.s. i know it can be accomplished by ngIf. But that would mean writing 10lines. I need to use shorter code.
vincecampanale
2#
 No, it is not possible to have dynamic tags in your HTML. You don't necessarily need to have 10 *ngIf's to accomplish this kind of behavior however. Using ComponentFactoryResolver and an entry component, you can dynamically insert whichever component you want into your DOM. An example of how this might look: @Component({ template: 
}) export class MyComponent implements AfterContentInit { @ViewChild('entry', {read: ViewContainerRef}) entry: ViewContainerRef; constructor(private resolver: ComponentFactoryResolver) {} ngAfterContentInit() { // Get your component's class here and save it in a variable const dynamicComponent = some condition ? ComponentOne : ComponentTwo; const factory = this.resolver.resolveComponentFactory(dynamicComponent); this.entry.createComponent(factory); } }  Note that this must happen in the AfterContentInit lifecycle hook. Edit: In response to your comment which is that the ComponentFactoryResolver is too complex, I would argue it is much simpler than using many *ngIf directives. This moves the complexity into a simple function rather than many lines of complex markup. Unfortunately, since you cannot use dynamic HTML tags, these are the two best options for what you want to do.