how to use changeDetection onPush with observable

Question

I am absolute beginner in Angular2,

this are my components,how to update this.product Array in HeaderComponent , whenever buynow() is triggered in FoodDetailsComponent

export class HeaderComponent {
    products: Array < any > ;
    cart: Array < any > ;
    Tabs: Array < any > ;

    constructor(public ShopDataService: ShopDataService) {
        this.products = this.ShopDataService.get();
    }
    ngOnInit() {}
}


export class FoodDetailsComponent {
    @Input()
    foodDetail: any;
    constructor(private ShopDataService: ShopDataService) {

    }
    buynow(product) {
        this.ShopDataService.add(product);
    }
    ngOnInit() {}

}

And i have few doubts how change Detection work,changeDetectionStrategy is only for child-parent component.how about sibling component works?

show your html, how these components are related. and where do you use onPush — Max Koretskyi
– Max Koretskyi, Commented Jul 13, 2017 at 5:06
this is main html,<div class="container"> <nbits-header></nbits-header> <router-outlet></router-outlet> </div> — suchi
– suchi, Commented Jul 13, 2017 at 5:19
read Everything you need to know about change detection in Angular to understand how onPush works — Max Koretskyi
– Max Koretskyi, Commented Jul 13, 2017 at 5:20
try like this public changedetect: ChangeDetectorRef this.changedetect.detectChanges() — balajivaishnav
– balajivaishnav, Commented Jul 13, 2017 at 5:31
this main html, <div class="container"> <shopkart-header></shopkart-header> <router-outlet></router-outlet> </div> shopkartHeader html , <div class="navbar-header"> <button type="button" class="navbar-toggle"> <span>{{products.length}}</span> </button> </div> in router-outlet, <div class="col-md-3" *ngFor="let food of foodDetail"> <div> <button class="btn btn-primary" (click) = "buynow(food)">Buy Now!</button> </div> </div> — suchi
– suchi, Commented Jul 13, 2017 at 5:33

Mo Sharif · Accepted Answer · 2017-07-13 08:36:08Z

1

you need to subscribe to the service when you get the data.

this.ShopDataService.get().subscribe( result => {this.products = result});

also please share the code in your service.

answered Jul 13, 2017 at 8:36

Mo Sharif

1245 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use changeDetection onPush with observable

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related