component in window.open

[harish venkatesan]

Hi team,

As stepping into angular i have many queries!

one of them is below

is there any method to open an angular specific component using

window.open ​​i have tried by myself using routing but it open complete angular project is there any way for this solution?

[Priyanka Karthikeyan]

Hi harish venkatesan,

Greetings from Syncfusion Support.

After careful validation, it appears that attempting to render our Angular component directly in a new window may cause it to operate outside the scope of the original Angular application, resulting in its failure to function as expected. 

However, there's an alternative solution that you can explore to achieve your desired outcome. You can utilize Angular's routing mechanism. Below is an example of how you can implement it:

[app-routing.module.ts]

 

import { NgModule } from '@angular/core';

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home.component';

import { TestComponent } from './test.component';

 

const routes: Routes = [

  { path: 'home', component: HomeComponent },

  { path: 'test', component: TestComponent },

  { path: '', redirectTo: '/home', pathMatch: 'full' }, // Optional: Redirect to 'home' for the empty path

  { path: '**', redirectTo: '/home' }, // Optional: Redirect to 'home' for unknown routes

];

 

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

 

[app.component.html]

 

<router-outlet></router-outlet>  

 

[home.component.html]

 

<h1>

    Welcome to {{ title }}!

  </h1>

 <div style="margin-top: 100px;">

  <button class="e-btn" (click)="openNewWindow()">Open New Window</button>

</div>

 

[home.component.ts]

 

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

import { WindowService } from './window.service';

@Component({

  selector: 'app-home',

  templateUrl: './home.component.html'

})

export class HomeComponent implements OnInit {

 

  ngOnInit(): void {

  }

  title = 'Your Angular App';

   

  constructor(private windowService: WindowService) {}

 

  openNewWindow() {

    this.windowService.openNewWindow();

  }

 

}

 

[window.service.ts]

 

…

export class WindowService {

  private newWindow: Window | null = null;

 

  openNewWindow() {

    this.newWindow = window.open('test', '_blank') as Window;

    return this.newWindow;

  }

 

}

 

[test.component.html]

 

<div>

    <h2>Test Component</h2>

  <div #dynamicComponentContainer></div>

    <div id="elementToOpen">

        <h2>Test Component</h2>

        <!-- Your TestComponent content goes here -->

      <ejs-multiselect

          id='multiSelect'

          #multiselect

          [dataSource]='data'

          [fields]='fields'

          placeholder='Select items'

        ></ejs-multiselect>

 

      <ejs-splitter #horizontal height='250px' width='600px' enablePersistence="true" >

        <e-panes>

          <e-pane [resizable]='true'></e-pane>

          <e-pane [resizable]='true'></e-pane>

          <e-pane [resizable]='true'></e-pane>

        </e-panes>

      </ejs-splitter>

 

        <button (click)="closeWindow()">Close Window</button>

      </div>

</div>

 

This approach leverages Angular's routing capabilities to manage different components within your application effectively.

Thank you for your understanding and patience as we work towards resolving this matter. If you have any further questions or need assistance, please don't hesitate to reach out. We're here to help!

 Regards,

Priyanka K

Attachment: NewWindowSplitter_2cc59da6.zip