How to view the records in table in angular without refreshing the page after updating the data

Question

sevice.ts

public getPlans(): Observable<Plan[]> {
    return this.http.get<Plan[]>(`${this.apiServerUrl}/prepaid-plan/all`);
  }
  public getPlanData(planId:number): Observable<Plan>{
    return this.http.get<Plan>(`${this.apiServerUrl}/prepaid-plan/find/`+planId);

  }

  public addPlan(plan: Plan): Observable<Plan> {
    return this.http.post<Plan>(`${this.apiServerUrl}/prepaid-plan/add`, plan);
  }

  updatePlan(planId:number,plan:Plan): Observable<Plan>{
    return this.http.put<Plan>(`${this.apiServerUrl}/prepaid-plan/update/`+planId,plan);
  }

  public deletePlan(planId: number): Observable<void> {
    return this.http.delete<void>(`${this.apiServerUrl}/prepaid-plan/delete/${planId}`);
  }

update plan method

public OnUpdatePlan(): void{
    const id=parseInt(this.route.snapshot.params['id'],10);
    this.api.updatePlan(id,this.editPlanData.value)
    .subscribe({
      next:(response:Plan)=>{
        console.log(response);
        this.getPrePlan()
      
      },
      error:()=>{
        alert("Error while adding records")
      }
    });


  }

After clicking Update Plan button ,it navigate to the table page. But the updated data is visible only after refreshing the page. How can I get the data in the table without refreshing the page . How to view the records in table in angular without refreshing the page after updating the data?