I am trying to open a new Tab to display details of user

Question

Open a new window tab on click of a button to display details in angular application

I was able to open a new tab with window.open functionality but in order to get the details a web service call is required i have a component already taking care of that i want to invoke the component on click

userHome.html 
   <div id="buttonId">
      <button mat-raised-button (click)="detailsWindow()"  
              [ngClass]="UserDetailClass()"    >User Detail</button>
UserHomeComponent
 (click)="detailsWindow(event) {
//routing logic to get to the component i need to invoke UserDetailComponent
    window.open(url, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');
  }
UserDetailComponent
I will be passing id and Flag as params 
ngOnInit() {
    this.userDetailOnLoad= true;
    this.userId = this.data;
    this.statusFlag = this.data.statusFlag;

    this.userDetailService.getUserDetails( this.userId,this.statusFlag).subscribe(
      data => {
        this.userDetails = data;
      }
    );
  }

Can you provide some code that you have already? – Harijs Deksnis Jun 05 '19 at 14:06 — Harijs Deksnis, Jun 05 '19 at 14:06

Shifenis · Accepted Answer · 2019-06-05T15:24:14.147

0

You can open a new tab with window.open, in wich you can pass a url that match with you route, a things like this: yourComponent/userId.

In this route you can use a component that take care to show data.

To take the the user's id:

constructor(private route: ActivatedRoute);

ngOnInit() {
    const params = route.snapshot.paramMap.get('userId');
}

edited Jun 05 '19 at 15:24

answered Jun 05 '19 at 14:11

Shifenis

1,056
11
22

In my routing component i have something like this { path: 'user-details', component:userDetailComponent, } – stackdevs Jun 05 '19 at 14:41
You must add the parameter to be able to get it in the component `{ path: 'user-details/:userId', component:userDetailComponent, }` – Shifenis Jun 05 '19 at 14:46
sure i did added that how can i invoke that route but var url ="user-details/1/true"; window.open(url, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');? and in the component how can i get he passed parameters on init() – stackdevs Jun 05 '19 at 15:18
@stackdevs I updated with the answer of your question – Shifenis Jun 05 '19 at 15:28
@stackdevs accept the answer if you resolve, please read https://stackoverflow.com/help/someone-answers – Shifenis Jun 05 '19 at 19:34
Is there a way passing the parameters through data object instead of passing through the url path params? And also i was able to route to a new tab but i want to exclude the app module html in the new tab @Silente13 – stackdevs Jun 07 '19 at 19:26
Why you should pass data through data object instead url? – Shifenis Jun 08 '19 at 11:04
I do not want to pass use id in the url – stackdevs Jun 10 '19 at 12:50
@stackdevs so you should create a service that it can take the info of the selected user – Shifenis Jun 10 '19 at 12:58
ok got it i will try that and how do we restrict from opening multiple new tabs ? so on click i was able to open a component to a new tab so i want to limit to that only tab once we close the active tab then we can open again not while one is already active – stackdevs Jun 10 '19 at 13:33
You can set a boolean parameter in `localStorage` to `true` when user enter in the `userDetailComponent`. In `ngOnDestroy` you can set the value to `false`, same thing when the user close the tab/window (https://stackoverflow.com/questions/38999842/angular-2-execute-code-when-closing-window) – Shifenis Jun 10 '19 at 13:52

I am trying to open a new Tab to display details of user

1 Answers1