<div class="ticket details overlay" *ngIf="ticket"> <div class="ticket details container"> <button class="close button" (click)="close()">×</button> <h2>Ticket Details</h2> <p><strong>Ticket ID:</strong> {{ ticket.id }}</p> <p><strong>Title:</strong> {{ ticket.title }}</p> <p><strong>Description:</strong> {{ ticket.description }}</p> <p><strong>Status:</strong> {{ ticket.status }}</p> </div> </div> .ticket details overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background color: rgba(0, 0, 0, 0.5); display: flex; justify content: center; align items: center; } .ticket details container { background color: white; padding: 20px; border radius: 8px; width: 50%; box shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: relative; } .close button { position: absolute; top: 10px; right: 10px; background: none; border: none; font size: 24px; cursor: pointer; } this is a pop make this as a pop up also add 4 button according to you make a good UI
