Add multiple dialogs into a single page - primeng

Question

I'm working into an Angular app that displays some data into a dataGrid as follows.
<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
<ng-template let-doc pTemplate="item">
<div class="ui-g-12 ui-md-3">
<span>{{doc.title}}</span>
</div>
</ng-template>
</p-dataGrid>
I'm trying to add a button, that when clicked, displays some info regarding the selected doc. I did it as follows:
<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
<ng-template let-doc pTemplate="item">
<div class="ui-g-12 ui-md-3">
<span>{{doc.title}}</span>
<button (click)="showDialog(doc.id)" pButton type="button" icon="fas fa-info-circle" iconPos="left" label="Details"></button>
<p-dialog id="{{doc.id}}" #{{doc.id}} [(visible)]="display" modal="modal" width="300" [responsive]="true">
<p>{{doc.title}}</p>
</p-dialog>
</div>
</ng-template>
</p-dataGrid>
Into my component, I added a function:
display: boolean = false;
showDialog(id: string) {
alert(id);
this.display = true;
}
The problem is since I'm using the same variable ("display") to control the visibility of all dialogs, browser gets lost about which dialog it should show/hide. In general, it uses the last one.
Since the quantity of elements into the screen is variable, I cannot create display1, display2, displayN variables. So my doubt is, how do I dynamically control the visibility of an element?
I tried something like with no luck:
showDialog(id: string) {
var e = document.getElementById(id);
e.attributes['ng-reflect-visible'].value = true;
}

Answer 1

There's no need to create as many p-dialog elements as docs. Only once should be enough. So if you extract yours p-dialog outside of your p-datagrid, HTML code becomes something like that :
<p-dataGrid [value]="docs" [paginator]="true" [rows]="8">
<ng-template let-doc pTemplate="item">
<div class="ui-g-12 ui-md-3">
<span>{{doc.title}}</span>
<button (click)="showDialog(doc.id)" pButton type="button" icon="fas fa-info-circle" iconPos="left" label="Details"></button>
</div>
</ng-template>
</p-dataGrid>
<p-dialog id="dialog" [(visible)]="display" modal="modal" width="300" [responsive]="true">
<h1>{{selectedDoc.title}}</h1>
Details : {{selectedDoc.details}}
</p-dialog>
where selectedDoc is assigned when you click on a button :
showDialog(id: string) {
this.selectedDoc = this.docs[id-1];
this.display = true;
}
Here is a working Plunker