Angular 6 - Sending an object between component using a Service

Question

Actually I'm confronted to 2 issues with Angular. My first consists on adding articles in a basket in different component. I send an object to a service and a second component retrieve it ...

My second issue is when i want to have a second product, i wish to display both of them and not overwritting it. I have been reading this : http://jasonwatmore.com/post/2018/06/25/angular-6-communicating-between-components-with-observable-subject in order to give me some skills ...

In my view i added a button :

<button class="btn btn-danger" (click)="onAddProduct()">Ajouter</button>

Here is my article component :

export class ProductComponent implements OnInit {
   @Input() private product: Product;
   private basketData: BasketdataService;

   constructor(private basketData: BasketdataService) {  }

   ngOnInit() {
   }
   onAddProduct() {
     console.log(this.product);
     this.basketData.onAddBasket(this.product);
   }
}

My service here retrieve the datas and share them with the basket component

export class BasketdataService {
  private subject = new Subject<any>();

  onAddBasket(product: Product) {
    this.subject.next(product);
  }

  onGetBasket(): Observable<Product> {
    return this.subject.asObservable();

  }
  removeArticleBasket() {
    this.subject.next();
  }

Here is my basketComponent

export class BasketmenuComponent implements OnInit, OnDestroy {
  product : Product;
  subscription : Subscription;

  constructor(private basketdataService: BasketdataService) {
    this.subscription = this.basketdataService.onGetBasket().subscribe(message => { this.product = product; });
  }
  ngOnInit() {
  }
  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }
}

I receive this error : ERROR ReferenceError: product is not defined at SafeSubscriber._next

rikg93 · Accepted Answer · 2018-11-20 12:07:53Z

1

In basketComponent you've an error, try this:

export class BasketmenuComponent implements OnInit, OnDestroy {
  product : Product;
  subscription : Subscription;

  constructor(private basketdataService: BasketdataService) {
    this.subscription = this.basketdataService.onGetBasket().subscribe(product=> { this.product = product; });
  }
  ngOnInit() {
  }
  ngOnDestroy() {
    // unsubscribe to ensure no memory leaks
    this.subscription.unsubscribe();
  }

}

It's not "message", but "product" in this.subscription

answered Nov 20, 2018 at 12:07

rikg93

1,2991 gold badge12 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Angular 6 - Sending an object between component using a Service

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related