Subscribing via services in angular

Question

I am trying to subscribe a function in service but getting error that "Property 'subscribe' does not exist on type 'void' " i used normal Subject to subscribe to the values here although i am emitting the values in the service file Below is the code where i subscribe to the function in service file

component.ts file

import { Subscription } from 'rxjs';


export class AllproductsComponent implements OnInit {



category
filter
allprodcuts

constructor(private prservice:ProductService,private 
router:Router,private route:ActivatedRoute) { }


subscription:Subscription
ngOnInit() {

this.route.queryParams.subscribe(params=>{
  console.log(params)
  this.category=params
})


this.subscription=this.prservice.getallproductsinallprodcuts()
.subscribe(       //Here i am facing the error
  (r)=>{
    this.allprodcuts=r
    console.log(r)
  }
)



}


}

service file

 import { Injectable } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { Product } from '../products.modal';
 @Injectable({
 providedIn: 'root'
 })
 export class ProductService {
 productslist=new BehaviorSubject<any>(1)
 getalllist=new Subject<any>()
 cards:any[]=[
 {
  id: 0,
  imageurl: "https://butterwithasideofbread.com/wp- 
 content/uploads/2012/07/Easiest-Best-Homemade- 
 Bread.BSB_.IMG_6014.jpg"
  ,price: "4"
  ,select: "Dairy"
  ,title: "Bread"
 },
 {
  id: 1
  ,imageurl: "https://butterwithasideofbread.com/wp- 
  content/uploads/2012/07/Easiest-Best-Homemade- 
  Bread.BSB_.IMG_6014.jpg"
  ,price: "23"
  , select: "Bread"
  ,title: "udemy"
  }

  ]
  constructor() {     
   }

 addtocards(values){
 values.id=this.cards.length
 this.cards.push(values)
 this.productslist.next(this.cards.slice())
// console.log(this.cards)
 }
getallproducts(){
return this.cards
 }

getproductbyid(id){
return this.cards[id]
 }

 update(valuestobeupdated,id){
 this.cards[id]=valuestobeupdated
this.cards[id].id=id


this.productslist.next(this.cards.slice())
}
getallproductsinallprodcuts(){
this.productslist.next(this.cards.slice())
}



}

There's a very popular accepted answer here https://stackoverflow.com/questions/35688084/how-to-get-query-params-from-url-in-angular-2 discussing this topic - does that help? — MandyShaw, Feb 18 '19 at 18:06

JGFMK · Accepted Answer · 2019-02-18T16:26:03.437

If you look at the Angular docs and look at the Heroes example.

This was in the service layer. Notice it's returning a Observable List of Heroes.

import { Observable, of } from 'rxjs';

getHeroes(): Observable<Hero[]> {
  return of(HEROES);
}

Remember they had this initially...

import { HEROES } from './mock-heroes';

which resolved to this;

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

You can just as easily swap out this mock service with a proper HTTP web service call later. Normally you would return something like this which once again can be swapped out to return an Observable model list, such as Heroes[].

private heroesUrl = 'api/heroes';

...

getHeroes (): Observable<Hero[]> {
  return this.http.get<Hero[]>(this.heroesUrl)
}

At the component level (the backing to the HTML Component (could be a whole page or a custom component with GUI to represent content).

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe(heroes => this.heroes = heroes);
}

You should do the same, subscribing in the component not the service and use a method signature that returns an Observable of a List of a domain model of your choosing.

Often you will find it described like so too, which is less ambiguous:

getHeroes(): void {
  this.heroService.getHeroes()
      .subscribe( (heroes:Heroes[]) =>  {
         this.heroes = heroes
       });
}

It makes the type of the heroes in the subscribe make more sense. It marries up with what is returned out of the service.

Be sure to accept answer if this helps..

Subscribing via services in angular

1 Answers1