Angular 2 refreshing the view without route.navigate

Question

I've built a CRUD app which communicates with a REST api but haven't found a way to refresh the view after one item is deleted. I've used router.navigate in the past to change views after other methods such as the create method and this works fine.

The problem is that the event which calls the delete method is inside the same listing of the items (every *ngFor item has its own delete event). So if I delete an item and then I use router.navigate to go to the current view it does nothing because you are already there, thus not seeing updated version of the view without the deleted item even if it has worked.

Is there any other way to refresh a view without using route.navigate?

Edit:

I've tried to implement ChangeDetectorRef, still not working though...

Here's the component:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiNoticiasService } from './api-noticias.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-noticias',
  templateUrl: 'noticias.component.html',
  styleUrls: ['noticias.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ApiNoticiasService]
})
export class NoticiasComponent implements OnInit {
  noticias: any;

  constructor(
    private cd: ChangeDetectorRef,
    private _apiNoticias: ApiNoticiasService) { }

  ngOnInit() {
    this._apiNoticias.getNoticias()
      .then( (noticias) => this.noticias = noticias)
      .catch((err) => {
        console.log(err);
      });
  }

  deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
  }

}

And this is the method in the service:

deleteNoticia(id) {
    return this._http.delete('http://localhost:3000/noticias/' +id)
      .map((response: Response) => response.json())
      .toPromise()
      .catch((err: any) => {
        console.log(err); 
        return Promise.reject(err);
      });
  }

can you please add your code for the REST communication service and the component that you want to refresh. — Optimus Pette, Jul 31 '16 at 21:37

Douglas · Accepted Answer · 2016-08-01T17:52:24.203

3

The topic you're looking for is Change Detection. The official docs seem to not have gotten around to saying much about it yet, but this blog post explains it fairly in depth.

I'm guessing you're using on push change detection, because the default checks everything on every event and should catch your deletion automatically already. You could drop that and go back to default, but you'd lose any performance gains you were hoping to get from that setting.

For keeping on push change detection, the section relevant to your problem is about 3/4 down the page. You need to inject a ChangeDetectorRef into the component that displays the item, and call markForCheck() on it when the deletion occurs.

Edit: On seeing your code, your problem is actually that you are not, in fact, updating the data in your view. The server may have deleted the item, but the client's local copy is still there.

You will need to either remove the local data manually by changing noticias appropriately, or re-fetch the whole batch from the server and replace the local cache with the newly fetched result, the same way you do in ngOnInit. The latter option must be done inside .then() on the deletion promise, otherwise getting the correct result will be subject to a race condition.

edited Aug 01 '16 at 17:52

answered Jul 31 '16 at 21:35

Douglas

5,017
1
14
28

I'm pretty sure I didn't implement it the right way. Still not working... – cerealex Aug 01 '16 at 09:53
@cerealex Turns out you're not using on push change detection after all. See my edit. – Douglas Aug 01 '16 at 17:53
I was trying to use an *ngIf="deleted==noticia.id" in the view and then let deleted = id at the end of the deleting method, so that way it would be out of the dom, but it seems *ngIf doesn't keep listening after being rendered... Anyway, I'll keep investigating. Thanks! – cerealex Aug 01 '16 at 19:31
@cerealex If the `*ngIf` was on the same DOM element as the `*ngFor`, that's a known issue - there are multiple ways someone might intend them to interact, and last I checked the Angular devs were leaning towards just saying "don't do it" rather than trying to pick one. `*ngIf` does update dynamically if its data changes, but don't put it on the same DOM node as `*ngFor`. – Douglas Aug 01 '16 at 21:44
Yeah, I learned about that because it kept returning errors. Though the reason it didn't work was because I was using `let deleted` instead of `this.deleted`. Even though `ngIf` does react now, it deletes every item from the dom when only one should be deleted. This is how the view is right now: `
content

cerealex

Aug 02 '16 at 10:41

score 0 · Answer 2 · answered Aug 08 '17 at 06:37

Actually your delete function should be looking like this.

deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
    this.ngOnInit();
  }

You need to call again ngOnInit() function to get list again.

Angular 2 refreshing the view without route.navigate

2 Answers2