I am using PrimeNG in my Angular project and I need to display an overlay panel within the p-messages component. Specifically, I want to display the overlay panel content in the detail section of the p-messages.

Here is my current code:

   <p-messages *ngIf="compileModel" [ngClass]="compileModel?'message-wrapper':'no-message-wrapper'" (onClose)="compileModel = undefined"
            [showTransitionOptions]="'0ms'"
            [hideTransitionOptions]="'50ms'" [enableService]="false"
            [value]="[{severity: compileModel?.severity, summary: compileModel?.summary, detail: truncatedDetail}]">
</p-messages>
<div *ngIf="compileModel" class="message-content">
    <a (click)="showFullDetail($event)" class="read-more-link">Read more</a>
</div>

<p-overlayPanel *ngIf="compileModel" #overlayPanel [style]="{'max-width':'400px'}">
    <div class="full-detail">{{ fullDetail }}</div>
</p-overlayPanel>

I want to achieve the following:

• The overlay panel content () should be displayed
  inside the p-messages component, specifically in the detail section.

How can I modify my code to embed the overlay panel within the p-messages component? Or how can i edit the html of the p-messages according to the needs ?

Any help or suggestions would be greatly appreciated!

current view :