Por qué mis datos no se refrescan después de agregar un nuevo proyecto. El cuadro de diálogo de PrimeNg también no se cierra. Por favor, aconsejeme para mejorar.

Cada vez que agrego un nuevo proyecto, el diálogo permanece abierto y si sigo haciendo clic en “Agregar”, los proyectos se añaden. Una vez cierro el diálogo, los nuevos proyectos añadidos no aparecen hasta que actualizo la página.

Mi archivo add-project-component.ts :

addProject(){
    var val ={
      id:this.id,
      projectName:this.projectName,
      clintName:this.clintName,
      initiationDate:this.initiationDate,
      duration:this.duration
    };
    this.projects.addProject(val).subscribe(res=>{
      this.messageService.add({severity:'success', summary:'Service Message', detail:res.toString()});
        alert(res.toString());
    });
  }

Los códigos HTML son:

<div class="container mt-12">
      <div class="mb-1">
        <label for="projectName">Project Name</label>
        <input pinputtext="" class="form-control" id="projectName" [(ngmodel)]="projectName" placeholder="ProjectName">
      </div><br>
      <div class="mb-1">
        <label for="clintName">Clint Name</label>
        <input pinputtext="" class="form-control" id="clintName" [(ngmodel)]="clintName" placeholder="ClintName">
      </div><br>
      <div class="form-check mb-1">
        <label for="initiationDate">Initiation Date</label>
        <p-calendar [(ngmodel)]="initiationDate" [showicon]="true" inputid="icon"></p-calendar>
      </div><br>
      <div class="form-check mb-1">
        <label for="duration">Duration</label>
        <input pinputtext="" class="form-control" id="duration" [(ngmodel)]="duration" placeholder="Duration">
      </div>
      <button (click)="addProject()" *ngif="proj.id==0" class="btn btn-primary">
        Add
      </button>
  </div>

Por favor, ayúdeme a resolver el problema. He visto otras preguntas relacionadas con este problema, pero no fueron de mucha ayuda.