Merge pull request #2534 from Akshat55/component-factory-resolver

fix: Update dynamic rendering strategy to use ONLY ComponentRef

Author: Akshat55

src/dialog/dialog.directive.ts

@@ -143,7 +143,7 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 		// set the config object (this can [and should!] be added to in child classes depending on what they need)
 		this.dialogConfig = {
 			title: this.title,
-			content: this.ibmDialog,
+			content: this.cdsDialog,
 			placement: this.placement,
 			parentRef: this.elementRef,
 			gap: this.gap,
@@ -247,12 +247,12 @@ export class DialogDirective implements OnInit, OnDestroy, OnChanges {
 	 * Helper method to call dialogService 'open'.
 	 * - Enforce accessibility by updating an aria attr for nativeElement.
 	 */
-	open() {
+	open(component?) {
 		// don't allow dialogs to be opened if they're already open
 		if (this.dialogRef || this.disabled) { return; }
 
 		// actually open the dialog, emit events, and set the open state
-		this.dialogRef = this.dialogService.open(this.viewContainerRef, this.dialogConfig);
+		this.dialogRef = this.dialogService.open(this.viewContainerRef, this.dialogConfig, component);
 		this.isOpen = true;
 		this.onOpen.emit();
 		this.isOpenChange.emit(true);

src/dialog/dialog.service.ts

@@ -1,8 +1,6 @@
 import {
 	Injector,
 	ComponentRef,
-	ComponentFactory,
-	ComponentFactoryResolver,
 	Injectable,
 	ViewContainerRef
 } from "@angular/core";
@@ -36,28 +34,10 @@ export class DialogService {
 		DialogService.dialogRefs.clear();
 	}
 
-	/**
-	 * The default component factory to use when creating dialogs
-	 */
-	public componentFactory: ComponentFactory<any>;
-
 	/**
 	 * Creates an instance of `DialogService`.
 	 */
-	constructor(
-		protected componentFactoryResolver: ComponentFactoryResolver,
-		protected injector: Injector,
-		protected placeholderService: PlaceholderService
-	) {}
-
-	/**
-	 * Set the context for the service. For example, the `component` property can be used to set the
-	 * default component that should be created by the service, for a given instance of the service.
-	 * @param options `{ component: any }` where `component` is a component that extends `dialog.component`
-	 */
-	setContext(options: { component: any }) {
-		this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(options.component);
-	}
+	constructor(protected injector: Injector, protected placeholderService: PlaceholderService) {}
 
 	/**
 	 * If `dialogRef` is defined, the Dialog is already open. If
@@ -68,25 +48,24 @@ export class DialogService {
 	 * May be `null` if an `cds-placeholder` exists and `dialogConfig.appendInline` is false
 	 * @param dialogConfig the `DialogConfig` for the component
 	 */
-	open(viewContainer: ViewContainerRef, dialogConfig: DialogConfig, component?: any) {
-		let componentFactory = this.componentFactory;
-		if (component) {
-			componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
+	open(viewContainer: ViewContainerRef, dialogConfig: DialogConfig, component: any) {
+		if (!component) {
+			return;
 		}
 
 		let dialogRef;
 		if (dialogConfig.appendInline) {
 			// add our component to the view
-			dialogRef = viewContainer.createComponent(componentFactory, 0, this.injector);
+			dialogRef = viewContainer.createComponent(component, { index: 0, injector: this.injector });
 		} else if (!this.placeholderService.hasPlaceholderRef()) {
-			dialogRef = viewContainer.createComponent(componentFactory, 0, this.injector);
+			dialogRef = viewContainer.createComponent(component, { index: 0, injector: this.injector });
 			if (dialogRef) {
 				setTimeout(() => {
 					window.document.querySelector("body").appendChild(dialogRef.location.nativeElement);
 				});
 			}
 		} else {
-			dialogRef = this.placeholderService.createComponent(componentFactory, this.injector);
+			dialogRef = this.placeholderService.createComponent(component, this.injector);
 		}
 
 		// keep track of all initialized dialogs

src/dialog/overflow-menu/overflow-menu-custom-pane.component.ts

@@ -6,6 +6,10 @@ import { closestAttr } from "carbon-components-angular/utils";
 import { CloseReasons } from "../dialog-config.interface";
 import { Dialog } from "../dialog.component";
 
+/**
+ * @deprecated as of v5
+ * Use Toggletip or Popover components instead
+ */
 @Component({
 	selector: "cds-overflow-custom-menu-pane, ibm-overflow-custom-menu-pane",
 	template: `

src/dialog/overflow-menu/overflow-menu.directive.ts

@@ -4,8 +4,7 @@ import {
 	ViewContainerRef,
 	Input,
 	TemplateRef,
-	HostListener,
-	AfterContentInit
+	HostListener
 } from "@angular/core";
 import { DialogDirective } from "../dialog.directive";
 import { DialogService } from "../dialog.service";
@@ -44,7 +43,7 @@ import { EventService } from "carbon-components-angular/utils";
 		DialogService
 	]
 })
-export class OverflowMenuDirective extends DialogDirective implements AfterContentInit {
+export class OverflowMenuDirective extends DialogDirective {
 	/**
 	 * @deprecated as of v5
 	 * Takes a template ref of `OverflowMenuOptions`s
@@ -83,10 +82,6 @@ export class OverflowMenuDirective extends DialogDirective implements AfterConte
 		super(elementRef, viewContainerRef, dialogService, eventService);
 	}
 
-	ngAfterContentInit() {
-		this.dialogService.setContext({ component: this.customPane ? OverflowMenuCustomPane : OverflowMenuPane });
-	}
-
 	updateConfig() {
 		this.dialogConfig.content = this.cdsOverflowMenu;
 		this.dialogConfig.flip = this.flip;
@@ -103,4 +98,8 @@ export class OverflowMenuDirective extends DialogDirective implements AfterConte
 				break;
 		}
 	}
+
+	open() {
+		return super.open(this.customPane ? OverflowMenuCustomPane : OverflowMenuPane);
+	}
 }

src/modal/base-modal.service.ts

@@ -1,5 +1,4 @@
 import {
-	ComponentFactoryResolver,
 	ComponentRef,
 	Injector,
 	Injectable
@@ -20,26 +19,23 @@ export class BaseModalService {
 	/**
 	 * Creates an instance of `ModalService`.
 	 */
-	constructor(public resolver: ComponentFactoryResolver, public placeholderService: PlaceholderService) {}
+	constructor(public placeholderService: PlaceholderService) {}
 
 	/**
 	 * Creates and renders the modal component that is passed in.
 	 * `inputs` is an optional parameter of `data` that can be passed to the `Modal` component.
 	 */
-	create<T>(data: {component: any, inputs?: any}): ComponentRef<any> {
-		let defaults = {inputs: {}};
+	create<T>(data: { component: any, inputs?: any }): ComponentRef<any> {
+		let defaults = { inputs: {} };
 		data = Object.assign({}, defaults, data);
 
 		const inputProviders = Object.keys(data.inputs).map(inputName => ({
 			provide: inputName,
 			useValue: data.inputs[inputName]
 		}));
-		const injector = Injector.create(inputProviders);
-		const factory = this.resolver.resolveComponentFactory(data.component);
+		const injector = Injector.create({ providers: inputProviders });
+		const component = this.placeholderService.createComponent(data.component, injector);
 		let focusedElement = document.activeElement as HTMLElement;
-
-		let component = this.placeholderService.createComponent(factory, injector);
-
 		setTimeout(() => {
 			component.instance.open = true;
 		});
@@ -84,9 +80,10 @@ export class BaseModalService {
 
 		// Let animation finish before component is removed
 		setTimeout(() => {
-			this.placeholderService.destroyComponent(BaseModalService.modalList[index]);
-			BaseModalService.modalList.splice(index, 1);
+			if (BaseModalService.modalList[index]) {
+				this.placeholderService.destroyComponent(BaseModalService.modalList[index]);
+				BaseModalService.modalList.splice(index, 1);
+			}
 		}, 240);
 	}
 }
-

src/modal/modal.service.ts

@@ -1,5 +1,4 @@
-import { ComponentFactoryResolver } from "@angular/core";
-import { Injectable } from "@angular/core";
+import { Injectable, ViewContainerRef } from "@angular/core";
 import { AlertModal } from "./alert-modal.component";
 import { AlertModalData } from "./alert-modal.interface";
 import { PlaceholderService } from "carbon-components-angular/placeholder";
@@ -19,11 +18,10 @@ export class ModalService extends BaseModalService {
 	/**
 	 * Creates an instance of `ModalService`.
 	 */
-	constructor(public resolver: ComponentFactoryResolver, public placeholderService: PlaceholderService) {
-		super(resolver, placeholderService);
+	constructor(public placeholderService: PlaceholderService) {
+		super(placeholderService);
 	}
 
-
 	/**
 	 * Creates and renders a new alert modal component.
 	 * @param data You can pass in:

src/notification/notification.service.ts

@@ -1,12 +1,11 @@
 import {
-	ApplicationRef,
-	ComponentFactoryResolver,
 	ComponentRef,
 	EventEmitter,
 	Injectable,
-	Injector,
 	OnDestroy,
-	NgZone
+	NgZone,
+	ViewContainerRef,
+	Injector
 } from "@angular/core";
 
 import { NotificationContent, ToastContent, ActionableContent } from "./notification-content.interface";
@@ -30,18 +29,13 @@ export class NotificationService implements OnDestroy {
 	public onClose: EventEmitter<any> = new EventEmitter();
 
 	/**
-	 * Constructs NotificationService.
-	 *
-	 * @param injector
-	 * @param componentFactoryResolver
-	 * @param applicationRef
+	 * Constructs Notification Service
 	 */
 	constructor(
 		protected injector: Injector,
-		protected componentFactoryResolver: ComponentFactoryResolver,
-		protected applicationRef: ApplicationRef,
-		protected ngZone: NgZone) {
-	}
+		protected viewContainer: ViewContainerRef,
+		protected ngZone: NgZone
+	) {}
 
 	/**
 	 * Shows the notification based on the `notificationObj`.
@@ -77,14 +71,11 @@ export class NotificationService implements OnDestroy {
 		notificationObj: NotificationContent | ToastContent | ActionableContent,
 		notificationComp = Notification
 	) {
-		const componentFactory = this.componentFactoryResolver.resolveComponentFactory(notificationComp);
-
-		let notificationRef = componentFactory.create(this.injector);
-		notificationRef.instance.notificationObj = notificationObj as any; // typescript isn't being very smart here, so we type to any
+		const notificationRef = this.viewContainer.createComponent(notificationComp);
+		notificationRef.instance.notificationObj = notificationObj;
 		this.notificationRefs.push(notificationRef);
 
 		this.onClose = notificationRef.instance.close;
-		this.applicationRef.attachView(notificationRef.hostView);
 
 		if (notificationObj.target) {
 			document.querySelector(notificationObj.target).appendChild(notificationRef.location.nativeElement);
@@ -155,7 +146,6 @@ export class NotificationService implements OnDestroy {
 			if (notificationRef instanceof Notification) {
 				this.close(notificationRef.componentRef);
 			} else {
-				this.applicationRef.detachView(notificationRef.hostView);
 				notificationRef.destroy();
 				const index = this.notificationRefs.indexOf(notificationRef);
 				if (index !== -1) {
@@ -216,13 +206,8 @@ export class NotificationService implements OnDestroy {
 	 *
 	 */
 	ngOnDestroy() {
-		if (this.notificationRefs.length > 0) {
-			for (let i = 0; i < this.notificationRefs.length; i++) {
-				let notificationRef = this.notificationRefs[i];
-				this.applicationRef.detachView(notificationRef.hostView);
-				notificationRef.destroy();
-			}
-			this.notificationRefs.length = 0;
-		}
+		this.notificationRefs.forEach((ref) => {
+			ref.destroy();
+		});
 	}
 }

src/placeholder/placeholder.service.ts

@@ -1,7 +1,6 @@
 import {
 	ComponentRef,
 	ViewContainerRef,
-	ComponentFactory,
 	Injector
 } from "@angular/core";
 import { Injectable } from "@angular/core";
@@ -34,19 +33,19 @@ export class PlaceholderService {
 	/**
 	 * Creates and returns component in the view.
 	 */
-	createComponent(componentFactory: ComponentFactory<any>, injector: Injector, id?: any): ComponentRef<any> {
+	createComponent(component: ComponentRef<any>, injector: Injector, id?: any): ComponentRef<any> {
 		if (id) {
 			if (!this.viewContainerMap.has(id)) {
 				console.error(`No view container with id ${id} found`);
 				return;
 			}
-			return this.viewContainerMap.get(id).createComponent(componentFactory, this.viewContainerMap.size, injector);
+			return this.viewContainerMap.get(id).createComponent(component as any, { index: this.viewContainerMap.size, injector });
 		}
 		if (!this.viewContainerRef) {
 			console.error("No view container defined! Likely due to a missing `cds-placeholder`");
 			return;
 		}
-		return this.viewContainerRef.createComponent(componentFactory, this.viewContainerRef.length, injector);
+		return this.viewContainerRef.createComponent(component as any, { index: this.viewContainerRef.length, injector });
 	}
 
 	destroyComponent(component: ComponentRef<any>) {