I have created a Popup component that I want to call as a dialog, but when my popup is displayed, the content appears and disappears.

Popup.component.ts

import { Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent{
  @Input() content: any
}

Popup.component.html

<div class="popup">
    <div class="popup-content">
      <mat-dialog-actions>
        <img src="../../../assets/images/closeIcon.png" class="edit-icon" style="cursor: pointer; padding-left: 10px;" mat-dialog-close>
      </mat-dialog-actions>
      <ng-container *ngTemplateOutlet="content"></ng-container>
    </div>
</div>

In show-one-task.component.ts I call popup component

<div class="container" #container>
    <h2> {{task.title}} <img src="../../../assets/images/edit.png" class="edit-icon" style="width: 20px; height: 20px; cursor: pointer; padding-left: 10px;" (click)="openPopup('10ms', '10ms')"> <img src="../../../assets/images/icons8-delete-64.png" style="width: 20px; height: 20px; cursor: pointer; padding-left: 5px;" (click)="deleteTask()"> </h2>
    <div class="firstTaskInfoDiv">
        <div class="smallDiv">
            <div class="centered-content">
                <h2>Task info</h2>
                <p for="projectName"><b>Project name:</b> {{project.projectName}} </p>
                <p for="subprojectName" *ngIf="isExistSubprojectName"><b>Subproject name:</b> {{task.subprojectName}} </p>
                <p for="stat"><b>Status:</b> {{ getStatusName(task.statusId) }} </p>
                <p for="prio"><b>Priority:</b> {{ getPriorityName(task.priorityId) }} </p>
                <p for="startDate"><b>Start date:</b> {{task.startDate | date: 'dd.MM.yyyy.'}} </p>
                <p for="dueDate"><b>End date:</b> {{task.dueDate| date: 'dd.MM.yyyy.'}} </p>
            </div>
        </div>
</div>
<app-popup [content]="popupContent" *ngIf="showPopup">
    
</app-popup>

<ng-template #popupContent>
    <div class="row">
      <label for="title">Title</label>
      <input #taskTitle id="title" type="text" class="nomargin" placeholder="Title" style="margin-top: 0; padding: 0;" >
    </div>
    <div class="row">
      <label for="subproject">Subproject</label>
      <select id="subproject" class="nomargin">
        <option disabled selected>Choose </option>
        <option *ngFor="let s of subprojects" [value]="s.name">{{ s.name }}</option>
      </select>
    </div>
</ng-template>