components.with.primeng.dialog.ts

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

@Component({
  selector: "gp-button2",
  template: `
    <button class="button" (click)="onToggleDialogClick()">
      Show dialog
    </button>
   <p-dialog header="Title" [(visible)]="visible">
    This is the dialog content
  </p-dialog>
  `,
  styles: [".button { background-color: cyan;}",
    ".pi.pi-times {color: red}"], // style the close icon
  encapsulation: ViewEncapsulation.None // we need this
})
export class Button2Component {
  visible = false;
  onToggleDialogClick() {
    this.visible = !this.visible;
  }
}