Replace deprecated Angular ComponentFactoryResolver, ComponentFactory

We Are Going To Discuss About Replace deprecated Angular ComponentFactoryResolver, ComponentFactory. So lets Start this Angular Article.

Replace deprecated Angular ComponentFactoryResolver, ComponentFactory

How to solve Replace deprecated Angular ComponentFactoryResolver, ComponentFactory

In Angular 13 the new API removes the need for ComponentFactoryResolver being injected into the constructor, like you did in your code.
Now to dynamically create a component you have to use ViewContainerRef.createComponent without using the factory.
So, instead of using
const compFactory: ComponentFactory<any> = this.resolver.resolveComponentFactory(DynamicTableComponent);
you can do:
import {ViewContainerRef} from '@angular/core'; /** your code logic */ constructor(private viewContainerRef: ViewContainerRef) public addTable(): void { const component = this.viewContainerRef.createComponent(YourElement); }

Replace deprecated Angular ComponentFactoryResolver, ComponentFactory

In Angular 13 the new API removes the need for ComponentFactoryResolver being injected into the constructor, like you did in your code.
Now to dynamically create a component you have to use ViewContainerRef.createComponent without using the factory.
So, instead of using
const compFactory: ComponentFactory<any> = this.resolver.resolveComponentFactory(DynamicTableComponent);
you can do:
import {ViewContainerRef} from '@angular/core'; /** your code logic */ constructor(private viewContainerRef: ViewContainerRef) public addTable(): void { const component = this.viewContainerRef.createComponent(YourElement); }

Solution 1

In Angular 13 the new API removes the need for ComponentFactoryResolver being injected into the constructor, like you did in your code.

Now to dynamically create a component you have to use ViewContainerRef.createComponent without using the factory.

So, instead of using

const compFactory: ComponentFactory<any> = this.resolver.resolveComponentFactory(DynamicTableComponent);

you can do:

import {ViewContainerRef} from '@angular/core';

/**
your code logic
*/

constructor(private viewContainerRef: ViewContainerRef)

public addTable(): void {
   const component = this.viewContainerRef.createComponent(YourElement);

}

Original Author Elidor00 Of This Content

Solution 2

After spending a few hours I have reached the correct solution for Angular 13 Ivy with the new Update of Component API:

First you need to create a directive, the best would be in a subfolder called ‘directives’, you can do it manually or use the command:

ng generate directive directives/DynamicChildLoader

This will generate the file:

dynamic-child-loader.directive.ts

There your code will need to be something like:

import { Directive, ViewContainerRef } from '@angular/core';
    
@Directive({
  selector: '[dynamicChildLoader]',
})
export class DynamicChildLoaderDirective {
  constructor(public viewContainerRef: ViewContainerRef) {}
}

Now in your component go to the .HTML and you need to include this:

<ng-template dynamicChildLoader=""></ng-template>

And in your .TS:

@ViewChild(DynamicChildLoaderDirective, { static: true })
dynamicChild!: DynamicChildLoaderDirective;
    
ngOnInit(): void {
  this.loadDynamicComponent();
}
    
private loadDynamicComponent() {
  this.dynamicChild.viewContainerRef.createComponent(YourDynamicChildComponent);
}

Don’t forget that in your app.module.ts or the module you are using to include in the Declarations part your DynamicChildLoaderDirective

@NgModule({
  declarations: [MyExampleComponent, DynamicChildLoaderDirective],
  imports: [CommonModule, ComponentsModule],
})

Original Author DylanM Of This Content

Conclusion

So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.

Also Read,

ittutorial team

I am an Information Technology Engineer. I have Completed my MCA And I have 4 Year Plus Experience, I am a web developer with knowledge of multiple back-end platforms Like PHP, Node.js, Python and frontend JavaScript frameworks Like Angular, React, and Vue.

Leave a Comment