title: PrimeNG angular 2 modal not working when called from another component
body: <p>I have a table with many rows defined in a component
  I want to achieve that when pressing a row on the table a modal (dialog) will appear.
  So i've created a separate component for the dialog yet its not working</p>
  
  <p>the table component code is here (relevant parts)</p>
  
  <pre><code>import { SwatModalComponent } from '../swat-modal/swat-modal.component';
  
  modal: SwatModalComponent;
  
    constructor(private alertService : AlertService) {
      if(alertService.filteredParam){
        //we have a filtered processAlertSwitchName
        this[alertService.filteredParam.name] = alertService.filteredParam.value;
        alertService.filteredParam = null;
      }
      this.registerEvents();
      this.modal = new SwatModalComponent();
    }
  
  showModal() {
      this.modal.showDialog();
    } 
  </code></pre>
  
  <p>The dialog code is basically copy paste from the doc's</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  import {DialogModule} from 'primeng/primeng';
  
  @Component({
    selector: 'app-swat-modal',
    templateUrl: './swat-modal.component.html',
    styleUrls: ['./swat-modal.component.sass']
  })
  export class SwatModalComponent implements OnInit {
  
    display: boolean = false;
  
      showDialog() {
          this.display = true;
      }
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>and the html code is here</p>
  
  <pre><code>&lt;p-dialog header="Alert Dialog" [(visible)]="display" modal="modal" width="300" responsive="true"&gt;
      &lt;header&gt;
          Header content here
      &lt;/header&gt;
      Content
      &lt;footer&gt;
          Footer content here
      &lt;/footer&gt;
  &lt;/p-dialog&gt;
  </code></pre>
  
  <p>on debugging i see that the SwatModalComponent attribute of display is being set to true, yet no modal appears on the screen.</p>