Set attribute on dynamically created Custom component in Angular

Question

I have a component belonging to a custom library:

<my-icon>

In order to have the icon, I should set the property [name] of this component. Something like this:

<my-icon [name]='warning'></my-icon>

I am dinamically creating these icons with TypeScript:

if (myCondition) {
    let icon = <HTMLElement>document.createElement('my-icon');
}

How should I set the property [name] in my variable icon in order to have the same result than above? I've tried icon.setAttribute('name','warning') but it doesn't work (that sets the HTML attribute name, and not the input name of the underlying Angular component.

you should use Renderer2 to manipulate DOM. It has also methods to setProperty, setAttribute etc — Julius Dzidzevičius
– Julius Dzidzevičius, Commented May 4, 2018 at 13:21

Wilhelm Olejnik · Accepted Answer · 2018-05-04 15:10:21Z

document.create does not create Angular component but only DOM element. If you want to dynamically create Angular component you should inject ComponentFactoryResolver service

constructor(private componentResolver: ComponentFactoryResolver) { }

which can be later used like this:

// create factory for icon component
const factory = this.componentResolver.resolveComponentFactory(MyIconComponent);

// create icon component and append it next to anchor element
const icon = this.anchor.createComponent(factory);

// assign some value to component input
icon.instance.name = 'icon name';

Anchor element can be obtained using ViewChild e.g. if your component template looks like this:

`<div #iconsHere></div>`

you'll have to add the following annotation:

  @ViewChild('iconsHere', {read: ViewContainerRef}) anchor: ViewContainerRef;

Please note that dynamically created components have to be declared as entry components in your module.

@NgModule({
  ...
  entryComponents: [ MyIconComponent ]
})
export class AppModule { }

Demo: https://stackblitz.com/edit/angular-jukjib

Collectives™ on Stack Overflow

Set attribute on dynamically created Custom component in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related