Angular: How to update view when Array changes?

Question

I have been reading post and googling an answer for this question without any success

I looked into these two links and nothing

Angular doesn't update view when array was changed

Updating HTML view when Angular array changed

I have two components (siblings) one component add Items and the other lists all items added. The idea is very simple, whenever someone adds an item I want to update the list in order to get that new item.

export class ListItem implements OnInit {
  list: SomeObject[] = [];

  constructor(private myService: SomeService) {}

  ngOnInit() {
    this.getItems();
  }

  getItems(): void {
    this.myService.getDomesticatedPokemons()
      .subscribe((newItems) => {
        this.list = newItems; // I can see that this line works as expected but the view doesn't get updated though
      });
  }
}

export class AddItem implements OnInit {
  constructor(private myService: SomeService, private list: ListItem) {}

  ngOnInit() {

  }

  saveItem(aForm: NgForm): void {
    // ...
    // ...
    // ...
    // ...

    this.myService.addItem({}).subscribe((result) => {
      if (result.ok === 1) {
        this.list.getItems();
      } else {
        console.error('Error: ...');
      }
    });


  }
}

UPDATE:

this is the view:

<!-- This is the list template -->
<div id="list">
    <div *ngFor="let item of list" class="item">
       ...
       ...
       ...
    </div>
</div>

for the add component there is a form and saveItem() is executed on submit

UPDATE 2: I created a stackblitz this example is working even though I couldn't (or at least I didn't know how) reproduce my service getting data from server. I commented out "more realistic" code the main component is list.

https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular — Chellappan வ, Dec 03 '18 at 17:44
we can't get the big picture without seeing the view/tepmlate/html — benshabatnoam, Dec 03 '18 at 18:11
@Chellappan Thanks for the link, I already tried ChangeDetectorRef.detectChanges() but didn't work. I'll try the other two now. benshabatnoam I added the HTML as requested — juanp_1982, Dec 03 '18 at 18:35
@benshabatnoam: I added the view and some comments as requested, :-) — juanp_1982, Dec 03 '18 at 18:39
Post a complete minimal example as a stackblitz. the code of the service, the decorators of your components, are necessary information. — JB Nizet, Dec 03 '18 at 18:40
I think you need to loop through `list.list` because in your view, `list` is a class. — Peter Kim, Dec 03 '18 at 18:48
here is a simple project (https://stackblitz.com/edit/so-53598976) where you can see that when the array is updated the view is updated too. can you modify this project to reproduce your issue? — benshabatnoam, Dec 03 '18 at 18:53

score 3 · Answer 1 · answered Dec 06 '18 at 00:19

I have tried to solve your problem statement:

component to insert into the list

view:

<h3>create list</h3>
Foo:
<input type="text" class="form-field" [(ngModel)]="newItem.foo"><br/>
Bar:
<input type="text" class="form-field" [(ngModel)]="newItem.bar"><br/>
<button class="btn" (click)="addItem()">Add</button>
<button class="btn" (click)="resetForm()">Reset</button>
<hr>

controller:

export class CreateListComponent  {
  public newItem:Object;

  constructor(private listService: ListService) {
    this.newItem = this.setInital();
  }

  private setInital(){
    return {
      foo: null,
      bar: null
    };
  }
  public addItem(){
    this.listService.addItem(this.newItem);
    this.resetForm();
  }

  public resetForm(){
    this.newItem = this.setInital();
  }
}

component to display the list

view:

<h3>display list</h3>

<div *ngFor="let item of list">
  {{item.foo}} - {{item.bar}}
</div>

controller:

export class DisplayListComponent implements OnInit, OnDestroy {
  public list = [];
  private subscription: Subscription;

  constructor(private listService: ListService) { }

  ngOnInit() {
    this.getList();
  }

  private getList() {
    this.subscription = this.listService.getFooBarList().subscribe(data => {
        this.list.push(data);
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Since both the components are at same hierarchy, I have used service and observable to pass data from create component to display component

service:

export class ListService {
  private listSubject = new Subject();

  constructor() {}

  public addItem(item: any) {
    this.listSubject.next(item);
  }

  public getFooBarList() {
    return this.listSubject.asObservable();
  }
}

I hope this helps you. For a working sample please refer this stackblitz.

Thanks for the response, @Shrinivas. one question, what's the idea or logic behind this line `this.subscription = this.listService.getFooBarList().subscribe(` in display-list.component.ts?? — juanp_1982, Dec 06 '18 at 16:43
It is about observables. The list a stream data (something like a TV channel which broadcasts some programme). I am subscribing to that channel. I get notified each time a new item is streamed. this.subscription is a handler to the subscription. When I do not want to to be notified, I will unsubscribe to that channel. — Shrinivas, Dec 07 '18 at 01:57

Angular: How to update view when Array changes?

1 Answers1