CODEWITHSUNDEEP
angulartypescript
Jack
Jack

Reputation: 1

Set component selector in a div using Interpolation, etc. in Angular

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>

Upvotes: 0

Views: 619

Answers (1)

KShewengger
KShewengger

Reputation: 8269

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>

Upvotes: 1

Related Questions