@angular/core#EmbeddedViewRef TypeScript Examples

appLoadingSubscription: Subscription = this.appLoading$
    .pipe(takeUntil(this.componentDestroyed$))
    .pipe(filter(status => !(!status && !this.loadingComponentRef)))
    .subscribe((status) => {
      if (!!status) {
        this.loadingComponentRef = this.componentFactoryResolver.resolveComponentFactory(PulseLoadingComponent)
          .create(this.vcr.injector);

        this.rootNode = (this.loadingComponentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

        this.renderer.appendChild(this.el.nativeElement, this.rootNode);
      } else {
        this.renderer.removeChild(this.el.nativeElement, this.rootNode);
        this.loadingComponentRef.destroy();
      }
    });

@profile
  private detectChangesOnChild(
    viewRef: EmbeddedViewRef<ItemContext>,
    index: number
  ) {
    if (Trace.isEnabled()) {
      PagerLog(`Manually detect changes in child: ${index}`);
    }

    this.zone.run(() => {
      viewRef.markForCheck();
      viewRef.detectChanges();
    })
  }

public setupViewRef(
    viewRef: EmbeddedViewRef<ItemContext>,
    data: any,
    index: number
  ): void {
    const context = viewRef.context;
    context.$implicit = data;
    context.item = data;
    context.index = index;
    context.even = index % 2 === 0;
    context.odd = !context.even;

    this.setupItemView.next({
      view: viewRef,
      data: data,
      index: index,
      context: context,
    });
  }

public setupChildViewRef(viewRef: EmbeddedViewRef<ChildItemContext>, data: any, parentIndex: number, index: number): void {
    const context = viewRef.context;
    context.$implicit = data;
    context.item = data;
    context.parentIndex = parentIndex;
    context.index = index;
    context.even = (index % 2 === 0);
    context.odd = !context.even;

    this.setupItemView.next({view: viewRef, data: data, index: index, context: context});
  }

public setupViewRef(viewRef: EmbeddedViewRef<ItemContext>, data: any, index: number): void {
    const context = viewRef.context;
    context.$implicit = data;
    context.item = data;
    context.index = index;
    context.even = (index % 2 === 0);
    context.odd = !context.even;

    this.setupItemView.next({view: viewRef, data: data, index: index, context: context});
  }

@profile
  public onFooterLoading(args: ItemEventData) {
    if (!args.view && !this.footerTemplate) {
      return;
    }

    const index = args.index;
    const items = (<any>args.object).items;
    const currentItem = typeof items.getItem === 'function' ? items.getItem(index) : items[index];
    let viewRef: EmbeddedViewRef<ItemContext>;

    if (args.view) {

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }
    }

    if (!viewRef) {
      viewRef = this.loader.createEmbeddedView(this.footerTemplate, new ItemContext(), 0);
      args.view = getItemViewRoot(viewRef);
      args.view[NG_VIEW] = viewRef;
    }

    this.setupViewRef(viewRef, currentItem, index);

    this.detectChangesOnChild(viewRef, index);
  }

@profile
  public onItemContentLoading(args: ItemEventData) {
    if (!args.view && !this.itemContentTemplate) {
      return;
    }

    const index = args.index;
    const childIndex = (args as any).childIndex;
    const childItems = this.accordionItemsView.childItems;
    const items = (<any>args.object).items;
    const currentItem = typeof items.getItem === 'function' ? items.getItem(index)[childItems][childIndex] : items[index][childItems][childIndex];

    let viewRef: EmbeddedViewRef<ChildItemContext>;

    if (args.view) {

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }
    }

    if (!viewRef) {
      viewRef = this.loader.createEmbeddedView(this.itemContentTemplate, new ChildItemContext(), 0);
      args.view = getItemViewRoot(viewRef);
      args.view[NG_VIEW] = viewRef;
    }

    this.setupChildViewRef(viewRef, currentItem, index, childIndex);

    this.detectChangesOnChild(viewRef, index);
  }

@profile
  public onItemHeaderLoading(args: ItemEventData) {
    if (!args.view && !this.itemHeaderTemplate) {
      return;
    }

    const index = args.index;
    const items = (<any>args.object).items;
    const currentItem = typeof items.getItem === 'function' ? items.getItem(index) : items[index];
    let viewRef: EmbeddedViewRef<ItemContext>;

    if (args.view) {

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }
    }

    if (!viewRef) {
      viewRef = this.loader.createEmbeddedView(this.itemHeaderTemplate, new ItemContext(), 0);
      args.view = getItemViewRoot(viewRef);
      args.view[NG_VIEW] = viewRef;
    }

    this.setupViewRef(viewRef, currentItem, index);

    this.detectChangesOnChild(viewRef, index);
  }

@profile
  public onHeaderLoading(args: ItemEventData) {
    if (!args.view && !this.headerTemplate) {
      return;
    }

    const index = args.index;
    const items = (<any>args.object).items;
    const currentItem = typeof items.getItem === 'function' ? items.getItem(index) : items[index];
    let viewRef: EmbeddedViewRef<ItemContext>;

    if (args.view) {

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }
    }

    if (!viewRef) {
      viewRef = this.loader.createEmbeddedView(this.headerTemplate, new ItemContext(), 0);
      args.view = getItemViewRoot(viewRef);
      args.view[NG_VIEW] = viewRef;
    }

    this.setupViewRef(viewRef, currentItem, index);

    this.detectChangesOnChild(viewRef, index);
  }

@profile
    private detectChangesOnChild(viewRef: EmbeddedViewRef<ItemContext>, index: number) {
        if (Trace.isEnabled()) {
            PagerLog(`Manually detect changes in child: ${index}`);
        }

        viewRef.markForCheck();
        viewRef.detectChanges();
    }

public setupViewRef(viewRef: EmbeddedViewRef<ItemContext>, data: any, index: number): void {
        const context = viewRef.context;
        context.$implicit = data;
        context.item = data;
        context.index = index;
        context.even = index % 2 === 0;
        context.odd = !context.even;

        this.setupItemView.next({
            view: viewRef,
            data,
            index,
            context
        });
    }

@profile
    public onItemDisposing(args: ItemEventData) {
        if (!args.view) {
            return;
        }
        let viewRef: EmbeddedViewRef<ItemContext>;

        if (args.view) {
            if (Trace.isEnabled()) {
                PagerLog(`onItemDisposing: ${args.index} - Removing angular view`);
            }

            viewRef = args.view[NG_VIEW];
            // Getting angular view from original element (in cases when ProxyViewContainer
            // is used NativeScript internally wraps it in a StackLayout)
            if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
                viewRef = args.view.getChildAt(0)[NG_VIEW];
            }

            if (!viewRef && Trace.isEnabled()) {
                PagerError(`ViewReference not found for item ${args.index}. View disposing is not working`);
            }
        }

        if (viewRef) {
            if (Trace.isEnabled()) {
                PagerLog(`onItemDisposing: ${args.index} - Disposing view reference`);
            }

            viewRef.destroy();
        }
    }

open(component: Type<any>) {
    let componentRef = this.componentCache.get(component);
    if (!componentRef) {
      const componentFactory = this.resolver.resolveComponentFactory(component);
      componentRef = componentFactory.create(this.injector);
      this.componentCache.set(component, componentRef);
      this.appRef.attachView(componentRef.hostView);
      const closeDialog = (componentRef.instance as any).closeDialog;
      if (closeDialog && closeDialog instanceof EventEmitter) {
        (closeDialog as EventEmitter<void>).subscribe(() => {
          this.close();
        });
      }
    }
    if (!this.backdrop) {
      this.backdrop = this.document.getElementById('app-dialog-backdrop');
    }
    if (!this.dialog) {
      this.dialog = this.document.getElementById('app-dialog');
      this.dialog.addEventListener('close-dialog', this.handleCloseDialog, true);
    }
    this.renderer.addClass(this.backdrop, 'is-open');
    this.dialog.innerHTML = '';
    this.renderer.appendChild(this.dialog, (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0]);
  }

private handleBindComponentEvent(container: ComponentContainer, itemConfig: ResolvedComponentItemConfig): ComponentContainer.BindableComponent {
    const componentType = itemConfig.componentType;
    const componentRef = this.goldenLayoutComponentService.createComponent(componentType, container);
    const component = componentRef.instance;

    this._componentRefMap.set(container, componentRef);

    if (this._virtualActive) {
      container.virtualRectingRequiredEvent = (container, width, height) => this.handleContainerVirtualRectingRequiredEvent(container, width, height);
      container.virtualVisibilityChangeRequiredEvent = (container, visible) => this.handleContainerVisibilityChangeRequiredEvent(container, visible);
      container.virtualZIndexChangeRequiredEvent = (container, logicalZIndex, defaultZIndex) => this.handleContainerVirtualZIndexChangeRequiredEvent(container, logicalZIndex, defaultZIndex);

      if (this._viewContainerRefActive) {
        this._componentViewContainerRef.insert(componentRef.hostView);
      } else {
        this._appRef.attachView(componentRef.hostView);
        const componentRootElement = component.rootHtmlElement;
        this._goldenLayoutElement.appendChild(componentRootElement);
      }
    } else {
      this._appRef.attachView(componentRef.hostView);
      const domElem = (componentRef.hostView as EmbeddedViewRef<unknown>).rootNodes[0] as HTMLElement;
      container.element.appendChild(domElem);
    }

    return {
      component,
      virtual: this._virtualActive,
    }
  }

/**
   * Attach a TemplatePortal as content to this modal container.
   * @param portal Portal to be attached as the modal content.
   */
  private attachTemplatePortal<C>(
    portal: TemplatePortal<C>,
  ): EmbeddedViewRef<C> {
    return this.portalOutlet.attachTemplatePortal(portal);
  }

createPanel(
    attachTo: string | undefined,
    overlayClassName: string | undefined
  ): ComponentRef<PanelComponent> {
    if (this.componentRef != undefined) {
      this.removePanel();
    }
    const factory: ComponentFactory<PanelComponent> =
      this.resolver.resolveComponentFactory(PanelComponent);

    this.componentRef = factory.create(this.injector);
    this.applicationRef.attachView(this.componentRef.hostView);
    const domElem = (this.componentRef.hostView as EmbeddedViewRef<any>)
      .rootNodes[0] as HTMLElement;

    this.overlay = document.createElement("div");
    this.overlay.id = "ngx-colors-overlay";
    this.overlay.classList.add("ngx-colors-overlay");
    this.overlay.classList.add(overlayClassName);
    Object.keys(OVERLAY_STYLES).forEach((attr: string) => {
      this.overlay.style[attr] = OVERLAY_STYLES[attr];
    });
    if (attachTo) {
      document.getElementById(attachTo).appendChild(this.overlay);
    } else {
      document.body.appendChild(this.overlay);
    }
    this.overlay.appendChild(domElem);

    return this.componentRef;
  }

async open<T = any>(data: IModalOpenParams): Promise<IModalOpenReturns<T>> {
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(ModalContainerComponent)
      .create(this.injector);

    componentRef.instance.childComponent = data.component;

    if (!!data.componentInputs) {
      componentRef.instance.childComponentInputs = data.componentInputs;
    }

    this.appRef.attachView(componentRef.hostView);

    const rootNode = (componentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

    this.renderer.appendChild(this.document.body, rootNode);

    componentRef.instance.closeModal$
      .pipe(take(1))
      .subscribe(() => {
        this.appRef.detachView(componentRef.hostView);
        componentRef.destroy();
      });

    return componentRef.instance.createdComponent$
      .pipe(take(1))
      .toPromise()
      .then(childComponentRef => ({
        modalContainer: componentRef,
        componentRef: childComponentRef
      }));
  }

async createOnBody<T = any>(component: Type<T>): Promise<{
    component: ComponentRef<T>;
    open: () => void;
    close: () => Promise<any>,
    destroyed$: ReplaySubject<void>
  }> {
    const componentRef = this.componentFactoryResolver
      .resolveComponentFactory(component)
      .create(this.injector);

    const responseObject = {
      destroyed$: new ReplaySubject<void>(),
      close: () => {
        return new Promise(resolve => {
          this.ngZone.run(() => {
            this.appRef.detachView(componentRef.hostView);
            componentRef.onDestroy(() => {
              responseObject.destroyed$.next();
              responseObject.destroyed$.complete();
              resolve(true);
            });
            componentRef.destroy();
          });
        });
      },
      open: () => {
        this.ngZone.run(() => {
          this.appRef.attachView(componentRef.hostView);

          const rootNode = (componentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

          this.renderer.appendChild(this.document.body, rootNode);
        });
      },
      component: componentRef,
    };

    return responseObject;
  }

@profile
    public onItemLoading(args: ItemEventData) {
        if (!args.view && !this.itemTemplate) {
            return;
        }

        if (!this.items) return;

        const index = args.index;
        const items = (args.object as any).items;
        const currentItem = typeof items.getItem === 'function' ? items.getItem(index) : items[index];
        let viewRef: EmbeddedViewRef<ItemContext>;

        if (args.view) {
            if (Trace.isEnabled()) {
                PagerLog(`onItemLoading: ${index} - Reusing existing view`);
            }

            viewRef = args.view[NG_VIEW];
            // Getting angular view from original element (in cases when ProxyViewContainer
            // is used NativeScript internally wraps it in a StackLayout)
            if (!viewRef && args.view instanceof LayoutBase && args.view.getChildrenCount() > 0) {
                viewRef = args.view.getChildAt(0)[NG_VIEW];
            }

            if (!viewRef && Trace.isEnabled()) {
                PagerError(`ViewReference not found for item ${index}. View recycling is not working`);
            }
        }

        if (!viewRef) {
            if (Trace.isEnabled()) {
                PagerLog(`onItemLoading: ${index} - Creating view from template`);
            }

            viewRef = this.loader.createEmbeddedView(this.itemTemplate, new ItemContext(), 0);
            args.view = getItemViewRoot(viewRef);
            args.view[NG_VIEW] = viewRef;
        }

        this.setupViewRef(viewRef, currentItem, index);

        this.detectChangesOnChild(viewRef, index);
    }

private view: EmbeddedViewRef<NgNoCheckContext>;

private viewRef: EmbeddedViewRef<{}> | null;

/**
 * Class used to conveniently type the embedded view ref for rows with a context.
 * @docs-private
 */
export abstract class RowViewRef<T> extends EmbeddedViewRef<RowContext<T>> {}

attachTemplatePortal<T>(portal: TemplatePortal<T>): EmbeddedViewRef<T> {
    if (this.portalOutlet.hasAttached()) {
      throwDialogContentAlreadyAttachedError();
    }
    this.blurActiveElement();
    return this.portalOutlet.attachTemplatePortal(portal);
  }

@profile
  private detectChangesOnChild(viewRef: EmbeddedViewRef<ItemContext>, index: number) {

    viewRef.markForCheck();
    viewRef.detectChanges();
  }

@profile
  public onItemLoading(args: ItemEventData) {
    if (!args.view && !this.itemTemplate) {
      return;
    }

    if (!this.items) return;

    const index = args.index;
    const items = (<any>args.object).items;
    const currentItem =
      typeof items.getItem === "function"
        ? items.getItem(index)
        : items[index];
    let viewRef: EmbeddedViewRef<ItemContext>;

    if (args.view) {
      if (Trace.isEnabled()) {
        PagerLog(`onItemLoading: ${index} - Reusing existing view`);
      }

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (
        !viewRef &&
        args.view instanceof LayoutBase &&
        args.view.getChildrenCount() > 0
      ) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }

      if (!viewRef && Trace.isEnabled()) {
        PagerError(
          `ViewReference not found for item ${index}. View recycling is not working`
        );
      }
    }

    if (!viewRef) {
      if (Trace.isEnabled()) {
        PagerLog(
          `onItemLoading: ${index} - Creating view from template`
        );
      }

      viewRef = this.loader.createEmbeddedView(
        this.itemTemplate,
        new ItemContext(),
        0
      );
      args.view = getItemViewRoot(viewRef);
      args.view[NG_VIEW] = viewRef;
    }

    this.setupViewRef(viewRef, currentItem, index);

    this.detectChangesOnChild(viewRef, index);
  }

@profile
  public onItemDisposing(args: ItemEventData) {
    if (!args.view) {
      return;
    }
    let viewRef: EmbeddedViewRef<ItemContext>;

    if (args.view) {
      if (Trace.isEnabled()) {
        PagerLog(
          `onItemDisposing: ${args.index} - Removing angular view`
        );
      }

      viewRef = args.view[NG_VIEW];
      // Getting angular view from original element (in cases when ProxyViewContainer
      // is used NativeScript internally wraps it in a StackLayout)
      if (
        !viewRef &&
        args.view instanceof LayoutBase &&
        args.view.getChildrenCount() > 0
      ) {
        viewRef = args.view.getChildAt(0)[NG_VIEW];
      }

      if (!viewRef && Trace.isEnabled()) {
        PagerError(
          `ViewReference not found for item ${args.index}. View disposing is not working`
        );
      }
    }

    if (viewRef) {
      if (Trace.isEnabled()) {
        PagerLog(
          `onItemDisposing: ${args.index} - Disposing view reference`
        );
      }

      viewRef.destroy();
    }
  }

embeddedViewRef: EmbeddedViewRef<BaseEmbeddedView<T>>;