Manually refresh page to see change in compoent

Question

In my angular 7 application i have some components and all data is coming from API which i am calling in ngOnInit. So far the CRUD is working fine and I'm getting the results but the only problem that I am facing is every time I have to manually refresh the page to see the result in my HTML.

component.ts

export class Component implements OnInit {
    public product: Product[];
   constructor(private productService: ProductService){}
    ngOnInit(){
        this.productService.getProducts().subscribe(result =>{
            this.product=result;
            console.log(result);
         });
}

component.html

<dx-data-grid
[dataSource]="product">
<dxi-column dataField="Category " cellTemplate="catTpl"> </dxi-column>
<div *dxTemplate="let t of 'catTpl'">
<span>{{ t.data.categoryId}}</span>
</div>
</dx-data-grid>

Possible duplicate of [Why are variables not updating?](https://stackoverflow.com/questions/51634604/why-are-variables-not-updating) — Vlad274, May 06 '19 at 23:14

score 0 · Answer 1 · answered May 06 '19 at 23:57

If you are using devextreme (I'm guessing from your dx-data-grid HTML element), try

import { ViewChild } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';

export class Component implements OnInit {
  @ViewChild(DxDataGridComponent) grid: DxDataGridComponent;
  // more code
  this.productService.getProducts().subscribe(result =>{
        this.product=result;
        console.log(result);
        this.grid.instance.refresh();
  });
}

Manually refresh page to see change in compoent

1 Answers1