docs: Update Popup.service example to remove ComponentFactoryResolver (#49638)

JeanMeche · atscott · commit d596ec012e20 · 2023-03-30T09:38:15.000-07:00
`ComponentFactoryResolver` has been deprecated and can be replaced by `createComponent()`. PR Close #49638
diff --git a/aio/content/examples/elements/src/app/popup.service.ts b/aio/content/examples/elements/src/app/popup.service.ts
@@ -1,14 +1,13 @@
 
-import { ApplicationRef, ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
+import { ApplicationRef, createComponent, EnvironmentInjector, Injectable } from '@angular/core';
 import { NgElement, WithProperties } from '@angular/elements';
 import { PopupComponent } from './popup.component';
 
 
 @Injectable()
 export class PopupService {
-  constructor(private injector: Injector,
-              private applicationRef: ApplicationRef,
-              private componentFactoryResolver: ComponentFactoryResolver) {}
+  constructor(private injector: EnvironmentInjector,
+              private applicationRef: ApplicationRef) {}
 
   // Previous dynamic-loading method required you to set up infrastructure
   // before adding the popup to the DOM.
@@ -17,8 +16,7 @@ export class PopupService {
     const popup = document.createElement('popup-component');
 
     // Create the component and wire it up with the element
-    const factory = this.componentFactoryResolver.resolveComponentFactory(PopupComponent);
-    const popupComponentRef = factory.create(this.injector, [], popup);
+    const popupComponentRef = createComponent(PopupComponent, {environmentInjector: this.injector, hostElement: popup});
 
     // Attach to the view so that the change detector knows to run
     this.applicationRef.attachView(popupComponentRef.hostView);
