Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Open new window in new tab

I am trying to open a new window when user click on button as follows:

protected assignActity(type: string): void {     var window = window.open('/#/link');     this.Service.assignActivity(type).subscribe(res => {       window.location = '/#/link/' + res;       console.log(res);     })   } 

but it's throwing an error:

core.umd.js:3468 TypeError: Cannot read property 'open' of undefined 

How to correct it to get it working?

like image 720
Rhushikesh Avatar asked Nov 23 '16 09:11

Rhushikesh


People also ask

How do I make a link open in a new tab instead of a new window?

Method 1: Ctrl+Click The first method requires a keyboard and a mouse or trackpad. Simply press and hold the Ctrl key (Cmd on a Mac) and then click the link in your browser. The link will open in a new tab in the background.

How do I open a new window when I click on a link?

To create a new window or tab when a link is clicked, the target="_blank" attribute must be in the a href tag, as shown below.


1 Answers

The reason for window variable being undefined is the fact that you have declared a variable named window again in the local scope.

According to the scoping rules of javascript/typescript, before the global variable is accessed, the local variables value is looked up. Also when you initially declare a variable, it is set to undefined, Hence the error message you receive.

So all you have to do is simply change the variable name in which you capture the opened tab's reference

var newWindow = window.open('some_url'); 

However this is not the recommended approach as angular2 apps can run in a variety of environments such as mobile or be rendered server side where window object may or may not be available. Not to mention it would be very hard to mock the window object in tests

Instead you can wrap the window object in a service and inject that service into your component. This way you can simply substitute the service implementation according to the environment, using Dependency injection

The service file

@Injectable() export class WindowRef {     constructor() {}      getNativeWindow() {         return window;     } } 

The component file

@Component({   selector : 'demo',   template : '<div> Demo </div>' }) class DemoComponent {     nativeWindow: any    constructor( private winRef: WindowRef ) {         this.nativeWindow = winRef.getNativeWindow();    }      protected assignActity(type: string): void {        var newWindow = this.nativeWindow.open('/#/link');        this.Service.assignActivity(type).subscribe(res => {         newWindow.location = '/#/link/' + res;        console.log(res);     }) } 
like image 160
Kiran Yallabandi Avatar answered Sep 20 '22 00:09

Kiran Yallabandi