popup with angular 7-CodePudding

I have the follwing code which work great, it show some simple data with table when press a button, But I want all the data of table to show with popup window and not part of the screen, how can I do it nicely? Thanks

<button pButton
        type="button"
        [disabled]="this.data == null"
        icon="pi pi-angle-down"
        (click)='toggleShowTable()'
        iconPos="left"
        label="versions"
        ></button>
<div *ngIf="data">
  
  <p-table *ngIf='showTable' [columns]="cols" [value]="data">
    <ng-template pTemplate="header" let-columns>
      <tr>
        <th  *ngFor="let col of columns">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-data let-columns="columns">
      <tr>
        <td *ngFor="let col of columns">
          <div >{{data[col.field]}}</div>
        </td>

      </tr>
    </ng-template>
  </p-table>
</div>

CodePudding user response：

PrimeNG has the dialog to support this:

app.component.html:

<p-dialog 
   [(visible)]="display"
   [showHeader]="false"
   [dismissableMask]="true"
   [modal]="true" 
   [contentStyle]="{'max-height':'200px'}">
   <p> content </p>
</p-dialog>

<button type="button" (click)="showDialog()" icon="pi pi-info-circle" label="Show"></button>

app.component.ts:

export class AppComponent {
    display: boolean = false;

    showDialog() {
        this.display = true;
    }
}

The content can be styled with contentStyle attribute, Header can be hidden via showHeader attribute and clicking in outside of the dialog will close it due to the dismissableMask attribute.

Other attributes can be found in the excellent documentation at: https://www.primefaces.org/primeng-v7-lts/#/dialog