In Angular 6, I keep some component names in database and I want to set the component selector via binding them from component to view using interpolation, property binding, etc. Is it possible something like that as we do when binding other properties in a div? Here
The normal usage:
<div comp-TicketList ></div>
The way I want to do:
<div {{ record.componentName }} ></div>
No, you can't achieve it using interpolation but you can achieve it through creating a directive and use it on your element you want to add an attribute with.
Had created a Stackblitz Demo for your reference
Directive
Use ElementRef and Renderer2
@Directive({
selector: '[customAttr]'
})
export class AttrDirective {
@Input()
set customAttr(value) {
this.renderer.setAttribute(this.element.nativeElement, value, '');
}
constructor(private element: ElementRef,
private renderer: Renderer2) {}
}
Template
// Please note that by default, html attributes are lowercase, when you specify
// comp-TicketList it will render as comp-ticketlist on your element
// Result: <div comp-ticketlist></div>
<div customAttr="comp-ticketlist"></div>
// Another example with different attribute name to render
// Result: <div comp-userlist></div>
<div customAttr="comp-userlist"></div>
