Simplest Angular Popup box

 1. app.component.html (Note that we are using same method call on two buttons: this is your choice. you can use different method calls also.) Also note the property binding [] for style in popup div. It should be [] and not () !.

<div >

  <label>This is main page div</label>

  <button (click)="onButtonClick()">Open Popup</button>

</div>

<div  [style]="popupHideShow" class="modal">

  <div class="modal-content">

    <label>This is popup</label>

    <button (click)="onButtonClick()">Close Popup</button>

  </div>

</div>

2. app.component.ts   : The sole work is to toggle "display:block" or "display:none" depending on button press.

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'simplest-popup';

  popupHideShow = "display:none";

  onButtonClick()

  {

    if ( this.popupHideShow == "display:none")

    {

      this.popupHideShow = "display:block";

    }

    else

    {

      this.popupHideShow = "display:none";

    }

  }

}

3. The Most important : app.component.css

.modal {

    display: none;

    position: fixed; /* this is imp, otherwise popup will not fill entire screen */

    z-index: 1;

    top: 0;

    left:0;

    width:100%;

    height:100%;

    overflow: auto;

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0, 0.4);

}

.modal-content {

    width:80%;  /* as per your requirement , width of popup relative to screen */

    margin:15% auto;

    padding:20px;

    border: 1px solid #888;

    background-color: #fefefe;

}