pass a data from angular 2 service that uses http to a component

Question

I have a component that calls a function from a service.

    export class ZoomComponent { 
    constructor(private productService: ProductService){}
     container: any;
     product:ProductObj[];
    ngOnInit() {
      this.product = this.productService.getProduct()
    }
 }

In the service I have an http call with subscribe. I want the result from the http request retuned to my component.

@Injectable()
export class ProductService {   

    product:ProductObj[];
    constructor(private http: Http) { }

     getProduct() {         
        return this.http.get('./friends.json').map((res:Response) => res.json()) .subscribe(
                data => this.product = data
                //function(data){console.log(data)}
            )       
        }   
}

I am new to angular2. I want the product variable returned as the result of the http request on my component. But while giving a console.log, the observable object is returning with out my response data

Use observables in the service and subscribe to them in the component. See also angular.io/docs/ts/latest/cookbook/… — Günter Zöchbauer
– Günter Zöchbauer, Commented Aug 18, 2016 at 6:11

stijn.aerts · Accepted Answer · 2016-08-18 06:14:20Z

3

@Injectable()
export class ProductService {   
    constructor(private http: Http) { }

    getProduct() {         
       return this.http.get('./friends.json')
         .map((res:Response) => res.json())     
    }   
}

And in component:

constructor( private productService: ProductService) {}

ngOnInit() {
    this.productService.getProduct().subscribe(
       data => console.log(data)
    )
}

answered Aug 18, 2016 at 6:14

stijn.aerts

6,2065 gold badges34 silver badges47 bronze badges

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

2 Comments

stijn.aerts Over a year ago

No problem! Don't forget to mark this as the answer ;)

Sanket Over a year ago

@stijn.aerts What if we subscribe in service ? How can we return the data in component ?

Collectives™ on Stack Overflow

pass a data from angular 2 service that uses http to a component

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related