@angular/cdk/portal#DomPortalOutlet TypeScript Examples

The following examples show how to use @angular/cdk/portal#DomPortalOutlet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: anchor.directive.ts From alauda-ui with MIT License

6 votes

ngAfterContentInit() {
    const containerEl = this.containerEl;
    this.anchorPortal = new ComponentPortal(AnchorComponent);
    const portalOutlet = new DomPortalOutlet(
      document.body,
      this.cfr,
      this.appRef,
      this.injector,
    );
    const anchorComponentRef = this.anchorPortal.attach(portalOutlet);
    const anchorEl = anchorComponentRef.injector.get(ElementRef)
      .nativeElement as HTMLElement;

    requestAnimationFrame(() =>
      this.adaptAnchorPosition(containerEl, anchorEl),
    );

    this.anchorLabels.changes
      .pipe(startWith(this.anchorLabels), takeUntil(this.destroy$$))
      .subscribe((anchorLabels: QueryList<AnchorLabelDirective>) => {
        Object.assign(anchorComponentRef.instance, {
          items: anchorLabels.toArray(),
        });
      });
  }

Example #2

Source File: menu-content.directive.ts From alauda-ui with MIT License

6 votes

attach(context?: any) {
    if (this.portal?.isAttached) {
      return;
    }
    if (!this.portal) {
      this.portal = new TemplatePortal(this.templateRef, this.viewContainerRef);
    }
    if (!this.outlet) {
      this.outlet = new DomPortalOutlet(
        this.doc.createElement('div'),
        this.componentFactoryResolver,
        this.appRef,
        this.injector,
      );
    }
    const el = this.templateRef.elementRef.nativeElement as HTMLElement;
    el.parentNode.insertBefore(this.outlet.outletElement, el);
    this.portal.attach(this.outlet, context);
  }

Example #3

Source File: base-message.ts From alauda-ui with MIT License

6 votes

protected initComponentRef(config: Config): ComponentRef<Component> {
    const portalHost = new DomPortalOutlet(
      this.wrapperInstance.elementRef.nativeElement,
      this.cfr,
      this.applicationRef,
      this.injector,
    );
    const componentRef = portalHost.attachComponentPortal(
      new ComponentPortal(this.componentClass),
    );
    componentRef.instance.setConfig(config);
    return componentRef;
  }

Example #4

Source File: dynamic-component.component.ts From halstack-angular with Apache License 2.0

6 votes

ngAfterViewInit(): void {
    const selector = (document.querySelector('#' + this.selector));
    // if (selector!==null){
    this.portalHost = new DomPortalOutlet(
      selector,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );
    this.portal = new ComponentPortal(this.component);
    if (this.portalHost != undefined)
      this.portalHost.attach(this.portal);
    // }

  }

Example #5

Source File: theme-builder-dynamic-component.component.ts From halstack-angular with Apache License 2.0

6 votes

private attachComponentToDom(select: string, component: any) {

    const selector = (document.querySelector('#' + select));
    // if (selector!==null){
    this.portalHost = new DomPortalOutlet(
      selector,
      this.componentFactoryResolver,
      this.appRef,
      this.injector
    );
    this.portal = new ComponentPortal(component);
    if (this.portalHost != undefined) {
      this.portalHost.attach(this.portal);
    }

  }

Example #6

Source File: menu-content.directive.ts From alauda-ui with MIT License

5 votes

private outlet: DomPortalOutlet;

Example #7

Source File: dynamic-component.component.ts From halstack-angular with Apache License 2.0

5 votes

private portalHost: DomPortalOutlet;

Example #8

Source File: theme-builder-dynamic-component.component.ts From halstack-angular with Apache License 2.0

5 votes

private portalHost: DomPortalOutlet;