CODEWITHSUNDEEP
angular11
Muhammad Bilal
Muhammad Bilal

Reputation: 3008

Need to show newly added records/rows in Angular11 using web api service without page refresh

Component.ts

ngOnInit() {
    this.employeeservice.getEmp_ServiceFun().subscribe(
      (data: Employee[]) => this.employees = data,
      error => this.error = error
    );
  }

service.ts

constructor(private http: HttpClient) { }

  public getEmp_ServiceFun(): Observable<Employee[]> {

    return this.http.get<Employee[]>(this.serverUrl + 'employees')
    .pipe(
      catchError(this.handleError)
      );
  }

Upvotes: 0

Views: 83

Answers (2)

YoNuevo
YoNuevo

Reputation: 117

it seems a bit strange to me to run the ngoninit method again since it is meant to run only once. I would wrap the employeeservice method in an observable interval. dont forget to unsubscribe though. otherwise it would keep calling the getEmp_ServiceFun until the whole app closes

ngOnInit() {
    interval(1000).pipe(
        map(() => {this.employeeservice.getEmp_ServiceFun().subscribe(
            (data: Employee[]) => this.employees = data,
            error => this.error = error
        );})}

this would replace the whole array instead of just adding to it though. I would take a second look at the getEmp_ServiceFun so that you can ask only for new data and not all data and then push it to the array.

edit: even better would be to not subscribe in the the map but move it to after the pipe. you might need to use a switchMap

Upvotes: 1

Muhammad Bilal
Muhammad Bilal

Reputation: 3008

I used setTimeout() to refresh a component, it is working fine, but now I just need to check, is it good practice or not?

ngOnInit() {
      this.employeeservice.getEmp_ServiceFun().subscribe(
        (data: Employee[]) => this.employees = data,
        error => this.error = error
      );
    //refresh this component
    this.timeout = setTimeout(() => { this.ngOnInit() }, 1000 * 1)
  }

Upvotes: 0

Related Questions