[Angular2+] 새창에서 팝업창 열기

<a> 태그로 target="_blank" 로 하여 새로운 창을 여니 새탭으로 열린다.

팝업으로 띄우려면 window.open(url, title, option)을 하면 되는데

Angular에서는 어떻게 하나 찾아보니 아래와 같았다.

import { Component, OnInit } from '@angular/core';
import {WindowRef} from './windowRef';
 
@Component({
  selector: 'app-root',
  
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  
})
 
export class AppComponent implements OnInit {
 
  title = 'app';
 
  constructor( private winRef: WindowRef ) { 
      console.log(winRef.nativeWindow);
  }
 
  openWindow() {
    const popOption = 'width=300';
    this.winRef.nativeWindow.open('http://google.co.kr', "", popOption);
  }
  
  ngOnInit(): void {
  
  };
    
}

app.component.html

<a (click)="openWindow()">Click</a>

windowRef.ts

import {Injectable} from '@angular/core';
 
function _window(): any {
  // return the native window obj
  return window;
}
 
@Injectable()
export class WindowRef {
  
  get nativeWindow(): any {
    return _window();
  }
  
}

새창으로 팝업이 열린다~