Refresh component in angular 2

6
votes

I am fairly new to angular 2, and trying to learn more about it.

My question here is: How do we refresh a component (re-invoke ngOnInit).

This component will be calling an API to retrieve some data from a database. and if a button is clicked, a PUT request will be sent to an API to update the data in the database. Since the change happens in the database instead of the component itself, I dont think ngOnChange or other change checking method will work. Here I am trying to let the ngOnInit be invoked again so the component can receive updated data.

I have tried router nagivate to refresh this page, but it does not work.

All the HTTP method happens in the another service file, I will not display them here since it's not relevant.

app.module.ts

@NgModule({
    imports: [
        RouterModule.forRoot([{path: 'data', component: DataComponent}]);
    ]
})

data.component.ts

@Component({
    template: `
        <button (click)= "onclick()">Click Me</button>
    `,
    ....
});

export class DataComponent implements OnInit{
    fetchData(): void{
        this.dataService.dataSessions().subscribe(
                data => this.data= data,
                error=> console.error(error),
                ()=> {}
        );
    }

     onclick(){
         this.dataChangeService.updateData().subscribe( response=> console.log(response));
         this.router.navigate['/data'];
     }

    ngOnInit(): void{
        this.fetchData();
    }

Any answer will be appreciated, I am always happy to learn more.

2
angular

2 Answers

2
votes

Try to call the this.fetchData() method once your call to the backend is resolved. Something like:

response=> { this.fetchData() ...
-4
votes
    import { Component, OnInit, Inject,OnChanges } from "@angular/core";
import { ProductService } from '../../services/product.service';
import 'rxjs/Rx';
import { ActivatedRoute, Router,NavigationEnd } from '@angular/router'
import { JQ_TOKEN } from '../../common/index'

@Component({
  selector: 'product-list',
  templateUrl: 'app/store/product_list/product-list.component.html',
  styleUrls:  ['app/store/product_list/css/style.css']
})
export class ProductListComponent implements OnInit {
  products:any
  productcount : any
  sub:any;
  constructor(private productService:ProductService,private route:ActivatedRoute,@Inject(JQ_TOKEN) private $:any,private router:Router )     { 

  }


  ngOnInit() {
 this.productService.getProduct(this.route.snapshot.params['productcategory']).map(product=>this.products)
    this.products = this.route.snapshot.data['products']
   this.productcount=+this.products.length;

 this.sub = this.route.params.subscribe(params => {
         this.paramsChanged(params['productcategory']);
       });   
  }
   paramsChanged(productcategory:string)
  {

       this.products = this.route.snapshot.data['products']
       this.productcount=+this.products.length;
    console.log('product list paramsChanged'  + productcategory);

     this.router.navigate['/store/'+productcategory];
  }


  }