Setting an attribute on a custom component that is dynamically created within an Angular application

Question

Setting an attribute on a custom component that is dynamically created within an Angular application

I am working with a custom library component called <my-icon>. To display the icon, I need to specify the property [name] like this:

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

Currently, I am dynamically creating these icons in TypeScript:

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

How can I set the [name] property on my variable icon to achieve the same result as above? I have tried using

icon.setAttribute('name','warning')

, but it seems to only set the HTML attribute name rather than the input name of the Angular component underlying it.

angular typescript

Answer 1

Answer №1

document.create function is only capable of creating DOM elements, not Angular components. To dynamically create an Angular component, you will need to utilize the ComponentFactoryResolver service.

constructor(private componentResolver: ComponentFactoryResolver) { }

This service can be used as shown below:

// 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';

The anchor element can be accessed using ViewChild. For example, if your component template includes:

`<div #iconsHere></div>`

You should add the following annotation:

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

Remember that dynamically created components must be declared as entry components in your module.

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

Check out a live demo here: https://stackblitz.com/edit/angular-jukjib

Answer 2

document.create function is only capable of creating DOM elements, not Angular components. To dynamically create an Angular component, you will need to utilize the ComponentFactoryResolver service.

constructor(private componentResolver: ComponentFactoryResolver) { }

This service can be used as shown below:

// 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';

The anchor element can be accessed using ViewChild. For example, if your component template includes:

`<div #iconsHere></div>`

You should add the following annotation:

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

Remember that dynamically created components must be declared as entry components in your module.

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

Check out a live demo here: https://stackblitz.com/edit/angular-jukjib

Setting an attribute on a custom component that is dynamically created within an Angular application

Answer №1

Similar questions

When retrieving data from MongoDB, an error occurs stating "Unable to read the property 'firstname' of null."

Can a single data type be utilized in a function that has multiple parameters?

Interactive feature on Google Maps information window allowing navigation to page's functions

Combining a pair of canvases

What is the reason behind the lag caused by setTimeout() in my application, while RxJS timer().subscribe(...) does not have the same

TypeScript is throwing an error about a missing property, even though it has been defined

Tips on updating the content of an HTML element dynamically when it is already being populated using *ngFor

Setting up Webhook for Clerk in a Next.js and Prisma (T3 stack) environment

Using Angular's routerLinkActive to manage active states for multiple paths

How can the `ng new --collection` command be utilized in Angular?

Accepting undefined in rest parameter of typescript

Struggling with implementing conditional validators in Angular2 form models. I have tried using myForm.setValidators(), but it doesn't appear to be functioning as expected

Can an IonChange event be triggered from a component in Ionic 3?

Page Breaks - Patience in anticipation of dataSource readiness

Using Angular and RxJS5 to refresh data from both HTTP requests and sockets

Using TypeScript to filter and compare two arrays based on a specific condition

How can I load a separate component.html file using a component.ts file?

Upon updating my Angular application from version 5.2 to the most recent one, I encountered an ERROR when running ng build

In Angular, the data retrieved from the API will only appear on the page once it has been manually

Guide to dynamically setting the index element with ngFor in Angular