Get data without page reload in angular5

Asked
Active3 hr before
Viewed126 times

5 Answers

reloadwithout
90%

Example_snippet/controller/utility/_reload.js/ reloadComponent() { let curr. . .
reloadComponent() {
   let currentUrl = this.router.url;
   this.router.routeReuseStrategy.shouldReuseRoute = () => false;
   this.router.onSameUrlNavigation = 'reload';
   this.router.navigate([currentUrl]);
}
load more v
88%

Anything you write in a lifecycle event handler should perfectly fine with being executed only once, or many times, The only thing you should rely on is that with paired ones (such as ngOnInit / ngOnDestroy), they’ll be paired

Example_snippet/controller/utility/_reload.js/ getInvoice(id:number): Observ. . .
 getInvoice(id:number): Observable<Invoice>{
    return this.http.get<Invoice>(`${environment.apiUrl}api/invoices/${id}`)
}

getInvoiceItems(invoiceId:number): Observable<InvoiceItem[]> {
    return this.http.get<InvoiceItem[]>(`${environment.apiUrl}api/invoiceitems`)
    .pipe(
        map((invoiceitems : InvoiceItem[]) => invoiceitems.filter(inv => inv.invoice_id == invoiceId))
    );
}

 updateInvoiceItems(id:any, invoiceitems:any):Observable<any>{
        return this.http.patch(`${environment.apiUrl}api/invoiceitems/${id}`, invoiceitems, this.httpOptions)
          .pipe(
            tap(_ => console.log(`updated invoice id=${id}`)))
    }
Step 2 continued with ngOnInit() { this.id = t. . .
 ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.invoiceService.getInvoice(this.id).subscribe(result => {
       this.item = result;
       //console.log(this.item)
    })
    this.invoiceService.getInvoiceItems(this.id).subscribe(result => {
       this.data = result;
       //console.log(this.data)
    })
 }
load more v
72%

How to reload or re-render the entire page using AngularJS?,How to Display Spinner on the Screen till the data from the API loads using Angular 8 ?,How to set focus on input field automatically on page load in AngularJS ?,How to submit form on pressing Enter with Angular 9?

Example_snippet/controller/utility/_without.js/ location.reload(forceGet). . .
location.reload(forceGet)
65%

How can I actually refresh the data without refreshing the component? Is subscriptions/observables the only way? If yes, can you help me find some good resources about this, if not, what other ways are there?," Once an action is completed and the data changes, user has to refresh the page for the new information to appear, ",If you have control of your domain (" Once an action is completed") it sounds like you could use something websockets and domain events

Example_snippet/controller/utility/_without.js/ distinctUntilChanged. . .
distinctUntilChanged
load more v
75%

I tried using this solution but all it does is get new data, Can I do something for the actual html page show the new data with reloading the page? – Ralph Mungcal Jul 25 '17 at 14:31 ,Connect and share knowledge within a single location that is structured and easy to search

Example_snippet/controller/utility/_without.js/ dataRefresher: any; ngOnInit(. . .
dataRefresher: any;

ngOnInit() {
   this.getData(true);
   this.refreshData();
}

getData(setPageFlag) {
   this.pagerService.getzip().then(data => {
         this.allItems = data;
         if (setPageFlag) {
            this.setPage(1);
         }
         console.log(JSON.stringify(this.allItems.length), "MESSAGES")
      },
      err => {
         console.log(err);
         return false;
      });
}

refreshData() {
   this.dataRefresher =
      setInterval(() => {
         this.getData(false);
         //Passing the false flag would prevent page reset to 1 and hinder user interaction
      }, 30000);
}
load more v