Refresh Material Table after update record in Angular

I am developing a solution in Asp net core wep api, Entity Framework, sql server 2014 and angular:

Angular CLI: 15.2.10

Node: 18.12.1

Package Manager: npm 8.19.2

OS: win32 x64

Angular: 15.2.10

In this solution I use the Mat-table component of Material UIO. The problem I have is that when I add a new record, delete or update the table it does not refresh automatically.

So I have to reload the page again by executing the following line of code:

window.location.reload();

I have implemented several solutions that are given on Google but none of them work for me that is why I had to implement the updated one of the table by executing the previous code.

I even reset the filter property of the datasource with this code: this.dataSource.filter="" and I assigned the value again with this code: this.dataSource.filter=currentdate

but it doesn't update the page:

export class AppComponent {
  title = 'Citado';

 
  displayedColumns: string[] = ['paciente', 'telefono', 'fecha','horario','otorgada','action'];
  dataSource!: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;

}

ngOnInit(): void
{
    this.getCita();
}
getCita() {
   
     let fechaActual= this._ServiceGlobals.getDiaActual(new Date());

    this._Service
      .getCita()
      .subscribe(res => {
        this.citaList = res;
       
        this.dataSource=new MatTableDataSource(res);
        this.dataSource.paginator=this.paginator;
        this.dataSource.sort=this.sort;
        this.dataSource.filter=fechaActual; //
        console.log("Resultados",res)
       
      })
  }
 
 addCita()
  {
   
    console.log(this.citaForm.value);
   
    if (this.citaForm.valid)
    {
          this.citaObj.Paciente =this.citaForm.value.Paciente;
          this.citaObj.Telefono =this.citaForm.value.Telefono;
         
          this.citaObj.Fecha =this._ServiceGlobals.getFechaFormateada(this.citaForm.value.Fecha.toLocaleDateString());

          this.citaObj.IdHorario =this.citaForm.value.IdHorario;
                 

          if (this.citaForm.value.Otorgada){
            this.citaObj.Otorgada =true;
          }else
          {
            this.citaObj.Otorgada =false;
          }
          this.citaObj.IdCita = 0;

          console.log("OBjeto Cita: ",this.citaObj);

          this._Service.createCita(this.citaObj).subscribe({next: (v) => {
            console.log(v)
          },
          error: (e) => {
            console.log("ERROR:",e)
            alert("Error")
          },
          complete: () => {
            console.log('Cita registrada!')
            alert("Cita registrada!");
           
            //this.getCita();
             
            window.location.reload();
           
            this.citaForm.reset();
            this.dialogRef.close('save');
           
            var closeModalBtn = document.getElementById('btnModalClose');
            if (closeModalBtn)
            {
              closeModalBtn.click();
            }

            this.citaForm.reset();
        }
    })
  }
}

The question is how can I make sure that when I add, update or delete a record the table is updated without having to reload the page?

Thank you in advance for your support.