fix(overlay): fix missing context when creating embeddedView

Author: garygrossgarten

projects/core/src/lib/dialog/dialog.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, ViewContainerRef } from '@angular/core';
 import { FivOverlayService, NgContent } from '../overlay/overlay.service';
 import { FivDialog } from '../dialog/dialog.component';
 
@@ -16,8 +16,16 @@ export interface DialogOptions {
 export class FivDialogService {
   constructor(private overlay: FivOverlayService) {}
 
-  openDialog(content: NgContent<any>, options?: DialogOptions) {
-    const c = this.overlay.createOverlay<FivDialog>(FivDialog, content);
+  openDialog(
+    viewContainerRef: ViewContainerRef,
+    content: NgContent<any>,
+    options?: DialogOptions
+  ) {
+    const c = this.overlay.createOverlay<FivDialog>(
+      viewContainerRef,
+      FivDialog,
+      content
+    );
     c.instance.verticalAlign = options ? options.verticalAlign : 'top';
     c.instance.verticalAlign = options ? options.verticalAlign : 'center';
     c.instance.backdrop = options ? options.backdrop : true;

projects/core/src/lib/feature-discovery/feature.directive.ts

@@ -9,7 +9,8 @@ import {
   ComponentRef,
   TemplateRef,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewContainerRef
 } from '@angular/core';
 import { FivOverlayService } from '../overlay/overlay.service';
 import { FivFeatureDiscovery } from './feature-discovery.component';
@@ -39,6 +40,7 @@ export class FivFeature {
 
   constructor(
     @Host() private host: ElementRef,
+    private viewContainer: ViewContainerRef,
     @Host() @Optional() private icon: FivIcon,
     private overlay: FivOverlayService,
     private platform: Platform
@@ -60,6 +62,7 @@ export class FivFeature {
       : this.getBounds(this.host.nativeElement);
 
     this.overlayRef = this.overlay.createOverlay(
+      this.viewContainer,
       FivFeatureDiscovery,
       this.fivFeature
     );

projects/core/src/lib/overlay/overlay.component.ts

@@ -5,7 +5,8 @@ import {
   TemplateRef,
   Input,
   Output,
-  EventEmitter
+  EventEmitter,
+  ViewContainerRef
 } from '@angular/core';
 import { FivOverlayContent } from './overlay-content/overlay-content.component';
 import { FivOverlayService } from './overlay.service';
@@ -25,11 +26,15 @@ export class FivOverlay {
   @Output() afterInit = new EventEmitter();
   private _open = false;
 
-  constructor(private overlay: FivOverlayService) {}
+  constructor(
+    private viewContainer: ViewContainerRef,
+    private overlay: FivOverlayService
+  ) {}
 
   show(priority?: number, data?: any) {
     if (!this.componentRef) {
       this.componentRef = this.overlay.createOverlay(
+        this.viewContainer,
         FivOverlayContent,
         this.ngContent
       );

projects/core/src/lib/overlay/overlay.service.ts

@@ -8,9 +8,10 @@ import {
   EmbeddedViewRef,
   ComponentRef,
   Renderer2,
-  RendererFactory2
+  RendererFactory2,
+  ViewContainerRef
 } from '@angular/core';
-export type NgContent<T> = TemplateRef<T> | Type<T> | string;
+export type NgContent<T> = TemplateRef<T> | Type<T>;
 
 @Injectable({
   providedIn: 'root'
@@ -28,14 +29,14 @@ export class FivOverlayService {
   }
 
   createOverlay<T>(
+    view: ViewContainerRef,
     component: Type<T>,
     content?: NgContent<T>
   ): ComponentRef<T> {
-    const resolvedContent = this.resolveNgContent(content);
+    const resolvedContent = this.resolveNgContent(view, content);
     const componentRef = this.componentFactoryResolver
       .resolveComponentFactory(component)
       .create(this.injector, resolvedContent);
-
     this.appRef.attachView(componentRef.hostView);
 
     const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
@@ -46,16 +47,15 @@ export class FivOverlayService {
     return componentRef;
   }
 
-  private resolveNgContent<T>(content: NgContent<T>) {
+  private resolveNgContent<T>(
+    viewContainerRef: ViewContainerRef,
+    content: NgContent<T>
+  ) {
     if (!content) {
       return;
     }
-    if (typeof content === 'string') {
-      const element = this.renderer.createText(content);
-      return [[element]];
-    }
     if (content instanceof TemplateRef) {
-      const viewRef = content.createEmbeddedView(null);
+      const viewRef = viewContainerRef.createEmbeddedView(content);
       return [viewRef.rootNodes];
     }
 

src/app/pages/dialog/dialog.page.html

@@ -62,7 +62,7 @@
 
   <ion-card-header>
     <ion-card-subtitle>Awesome Subtitle</ion-card-subtitle>
-    <ion-card-title>Awesome Title</ion-card-title>
+    <ion-card-title>{{'Awesome Title' | uppercase }}</ion-card-title>
   </ion-card-header>
   <ion-card-content>
     <p>The content for this dialog</p>

src/app/pages/feature-discovery/feature-discovery.page.html

@@ -75,7 +75,7 @@
   <div padding>
     <ion-text color="light">
       <h1>Go Back</h1>
-      <p>Leave this page by clicking the back arrow.</p>
+      <p>{{'Leave this page by clicking the back arrow.' | uppercase}}</p>
     </ion-text>
     <ion-buttons>
       <ion-button (click)="back.hide(); fab.show()" color="light" shape="round" fill="outline">