How to create dynamic components using service without ComponentFactoryResolver as it is deprecated in angular

Question

As you may know in earlier versions of angular, dynamic components could be created with the help of ComponentFactoryResolver as

export class DialogService {
  dialogComponentRef: ComponentRef<DialogComponent>

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private appRef: ApplicationRef,
    private injector: Injector
  ) {}

  appendDialogComponentToBody() {
     // logic to add component using `ComponentFactoryResolver` instance
  }
}

but now ComponentFactoryResolver is deprecated for latest versions.

Yeah there is a way (so far I know) we can create dynamic components with the following snippet

@ViewChild("viewContainerRef", { read: ViewContainerRef }) vcr!: ViewContainerRef;

but again this only works within the component, not with service.

Any help would be appreciated.

Does this answer your question? How can I inject ViewContainerRef into a service? — skink
– skink, Commented Sep 20, 2022 at 11:39
As long as you stay in Angular 13, it's okay to keep using the "deprecated way". The replacement is only available in 14.1 Please have a look here netbasal.com/… The new createComponent API, that's the replacement. — WSD
– WSD, Commented Sep 20, 2022 at 11:41
@shrink actually your provided is required to have component already exist but think of an angular material dialog, you just create the dialog-component only through a service. — WasiF
– WasiF, Commented Sep 20, 2022 at 12:32

user776686 · Accepted Answer · 2023-05-08 20:59:24Z

9

You should be able to use the createComponent function exported from @angular/core,

const componentRef = createComponent(MyComponent, {
  environmentInjector: this.appRef.injector,
})

then

this.appRef.attachView(componentRef.hostView); // and detach later

and you should be good to go without viewContainerRef

Docs

answered May 8, 2023 at 20:59

user776686

8,77817 gold badges80 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user776686 Over a year ago

should appRef.injector fail, that means it doesn't have all providers. In that case take the injector from the target component.

Mark Thompson Over a year ago

Amazing, I was wondering how to do this without needing ViewContainerRef. Didn't know they exported such a simple function to do this now

Collectives™ on Stack Overflow

How to create dynamic components using service without ComponentFactoryResolver as it is deprecated in angular

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related