CODEWITHSUNDEEP
angular
ararb78
ararb78

Reputation: 1175

angular2 communication between components with observable

I'm testing with observables. I have a component catalog-item.ts that when I click on buy I want the component basket-status.component.ts to be updated with the item I send from the catalog-item.ts. the case is that when I send the item, it arrives at the service but it does not reach the basket component, I do not know what I'm doing wrong. Any idea?

BasketWrapperService.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class BasketWrapperService {
    private addItemToBasketSource = new Subject<string>();
    addItemToBasket$ = this.addItemToBasketSource.asObservable();
    addItemToBasket(item: any) {
        this.addItemToBasketSource.next(item);
    }
}

catalog-item.componet.ts:

import { Component, OnInit } from '@angular/core';
import { BasketWrapperService } from '../BasketWrapperService';
import { catalogModel } from '../catalogModel';
@Component({
    selector: 'app-catalog-item',
    template: '<button (click)="comprar()">Comprar producto</button>',
    styleUrls: ['./catalog-item.component.css']
    , providers: [BasketWrapperService]
})
export class CatalogItemComponent implements OnInit {
    private producto: catalogModel;
    constructor(private basketService: BasketWrapperService) { }

    ngOnInit() { }

    comprar() {
        this.producto = new catalogModel();
        this.producto.concepto = "chaqueta";
        this.producto.id = 1;
        this.producto.precio = 80.50;
        this.addToCart(this.producto);
    }

    addToCart(item: catalogModel) {
        this.basketService.addItemToBasket(item);
    }
}

basket-status.component.ts

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { BasketWrapperService } from '../BasketWrapperService';

@Component({
    selector: 'app-basket-status',
    templateUrl: './basket-status.component.html',
    styleUrls: ['./basket-status.component.css'],
    providers: [BasketWrapperService]
})
export class BasketStatusComponent implements OnInit {
    subscription: Subscription;
    constructor(private basketEvents: BasketWrapperService) {
    }

    ngOnInit() {
        this.subscription = this.basketEvents.addItemToBasket$.subscribe(
            item => {
                console.log(item);
            });
    }
}

Upvotes: 0

Views: 317

Answers (1)

Double H
Double H

Reputation: 4160

Problem is you are using BasketWrapperService as Providers in each of your component. So you are creating Multiple object of BasketWrapperService .. Instead of creating multiple object Angular provider DI of each providers if service are provided within Module Decorator

@NgModule({
    BasketStatusComponent,
    CatalogItemComponent
  ],
  imports: [
    BrowserModule,
  ],
  providers: [
    BasketWrapperService   //Provide Your service here
  ],
  bootstrap: [AppComponent],
})

Now Your basket-status.component.ts I have removed BasketWrapperService

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { BasketWrapperService } from '../services/BasketWrapperService';

@Component({
    selector: 'app-basket-status',
    template: '{{items | json}}',
})
...
...

Remove BaseketWrapperService from catalog-item.component.ts

import { Component, OnInit } from '@angular/core';
import { BasketWrapperService } from '../services/BasketWrapperService';

@Component({
    selector: 'app-catalog-item',
    template: '<button (click)="comprar()">Comprar producto</button>',
})
...
...

By doing this only 1 Object of BasketWrapperService is used by your Angular Aplication

Upvotes: 1

Related Questions