Having trouble with Angular 4 Portal/CdkPortal not functioning properly in a new child window

Question

Having trouble with Angular 4 Portal/CdkPortal not functioning properly in a new child window

I am currently working on an Angular 4 application and I am facing the task of displaying a specific component in a new child window. After researching for a solution (I am not interested in using routing by URL as my server always redirects to index with window.open('some URL')), I came across this helpful example on StackBlitz: StackBlitz Example

In the provided example, they are utilizing CdkPortal. However, I encountered an issue as it seems cdk portal is not available in angular 4 (an error message stating '

@angular/cdk/portal"' has no exported member 'CdkPortal'

was displayed).

Although I attempted to replicate the same example since it perfectly aligns with my requirements, it doesn't seem to work with my angular version.

Is there an equivalent example that can be used for Angular 4?

ADDITIONAL

The example includes a code snippet to display the window:

<window *ngIf="showPortal">
  <h2>Hello world from another window!!</h2>
  <button (click)="this.showPortal = false">Close me!</button>
</window>

This raises the question if it's possible to add another component within the main component being attached in the portal. For instance:

<window *ngIf="showPortal">
  <my-other-component [currentValue]="someValue"></my-other-component>
</window>

If such functionality is achievable, will the added component function correctly?

angular typescript window portal

Answer 1

Answer №1

Here is a solution to generate a child window without using CdkPortal.

The method used here involves the generic window.open() function to open a new window and utilizing the name property of the window to reference the opened window.

In app.component.ts:

import { Component,ComponentFactoryResolver, ViewChild, ViewContainerRef,Injector } from '@angular/core';
import { DynamicWindowComponent } from './dynamic-window/dynamic-window.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  injector: Injector;
  OpenWindow : any

  constructor(private resolver: ComponentFactoryResolver) { }

  open(): void {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicWindowComponent);
    let componentRef  = componentFactory.create(this.injector);
    this.OpenWindow = window.open('', 'childwindow', 'width=400,height=400,left=150,top=200');
    this.OpenWindow.document.body.innerHTML = "";
    this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);
  }

  close(){
    this.OpenWindow.close()
  }
}

In app.component.html:

<button (click)="open()">Dynamically Add Component</button>

In dynamic-window.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-window',
  templateUrl: './dynamic-window.component.html',
  styleUrls: ['./dynamic-window.component.css']
})
export class DynamicWindowComponent{
  close(){
    // get reference of child window by its name and close it
    let existingWin = window.open('', 'childwindow');
    existingWin.close();
  }
}

In dynamic-window.component.html:

<p>Dynamic Component</p>
 <button (click)="close()">Close me!</button>

For a working example, you can check the link below:

https://stackblitz.com/edit/angular-rbapx4?embed=1&file=src/app/app.component.ts

Answer 2

Here is a solution to generate a child window without using CdkPortal.

The method used here involves the generic window.open() function to open a new window and utilizing the name property of the window to reference the opened window.

In app.component.ts:

import { Component,ComponentFactoryResolver, ViewChild, ViewContainerRef,Injector } from '@angular/core';
import { DynamicWindowComponent } from './dynamic-window/dynamic-window.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  injector: Injector;
  OpenWindow : any

  constructor(private resolver: ComponentFactoryResolver) { }

  open(): void {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicWindowComponent);
    let componentRef  = componentFactory.create(this.injector);
    this.OpenWindow = window.open('', 'childwindow', 'width=400,height=400,left=150,top=200');
    this.OpenWindow.document.body.innerHTML = "";
    this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);
  }

  close(){
    this.OpenWindow.close()
  }
}

In app.component.html:

<button (click)="open()">Dynamically Add Component</button>

In dynamic-window.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-window',
  templateUrl: './dynamic-window.component.html',
  styleUrls: ['./dynamic-window.component.css']
})
export class DynamicWindowComponent{
  close(){
    // get reference of child window by its name and close it
    let existingWin = window.open('', 'childwindow');
    existingWin.close();
  }
}

In dynamic-window.component.html:

<p>Dynamic Component</p>
 <button (click)="close()">Close me!</button>

For a working example, you can check the link below:

https://stackblitz.com/edit/angular-rbapx4?embed=1&file=src/app/app.component.ts

Having trouble with Angular 4 Portal/CdkPortal not functioning properly in a new child window

Answer №1

Similar questions

The information in the map cannot be inferred by Typescript based on the generic key type

Trouble loading data with ContentChildren when querying RouterLink and RouterLinkWithHref

creating a toolbar with content using Ionic framework

Angular 5 arrays within arrays

A guide on simulating x-date-pickers from mui using jest

Developing a FixedUpdate Function in TypeScript

Injecting multiple instances of an abstract service in Angular can be achieved using the following techniques

Encountering issues with `createAsyncThunks` triggering errors in Prettier

What is the best way to create a function that can securely search for a URL containing parameters while ensuring type safety?

Dynamically incorporate controls in Angular4.4-RxJs post API data retrieval

"Enhance your database with Firebase's dynamic features for adding and removing

"Exploring the process of passing an observable to map in RxJS

Storing numerous string labels and arrays in a TypeScript associative array

Find a Mongoose query that retrieves items where X exists in both arrays, while Y only exists in one array

Tips for retaining mat table paginator on the chosen page even after refreshing the page

Tips for creating an array that aligns with the keys of a type in TypeScript

Error compiling SCSS in Angular 6 due to a util.js issue

Steps for resetting the TypeScript version in VSCode:

Developing middleware for managing event handlers

What is the best method for sending ngForm to a child component?