How update *ngFor on updating array using observable and how to initialize observable on website load?

Question

I have two components "cart" and "home". Here "home" component is displaying list of products and it is the first page of website. I want to update cart when someone add product to the cart using "cart" button. For that I have create a service using observable to send message from "home" to "cart" component.

Problems I'm facing: 1. *ngFor is not updating when updating the array using observable. 2. As I'm initializing observable on ngOnInit() cart array is only updates when I visit cart component at least once.

home.component.ts

sendToCart(id:string) {
this.addtocart.sendId(id);
}

cart.service.ts

private productIdSource = new Subject<string>();
productId$ = this.productIdSource.asObservable(); 

constructor() { }

sendId(id:string) {
this.productIdSource.next(id);
}

cart.component.ts

itemList:any = ["hello"];

constructor(private addtocart: CartService) {
}
ngOnInit() {
  this.addtocart.productId$.subscribe(
    msg => {
      console.log(msg);
      this.itemList.push(msg);
      console.log(this.itemList);
    }
  )
}

cart.component.html

<ul>
<li *ngFor="let item of itemList">
    {{item}}
</li>
</ul>

I tried "ChangeDetectorRef", markForCheck() and detectChanges() but none of those worked.

Adrita Sharma Adrita Sharma · Accepted Answer · 2019-09-26T07:03:06

Use BehaviorSubject:

private productIdSource = new BehaviorSubject<string>();
productId$ = this.productIdSource.asObservable(); 

constructor() { }

sendId(id:string) {
   this.productIdSource.next(id);
}

How update *ngFor on updating array using observable and how to initialize observable on website load?

2 Answers