I am trying to subscribe to an observable from a service, it builds without error but I get the error "this.service.getBanners(...).subscribe is not a function" when viewing in the browser.
Service:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable()
export class BannerService {
banners: any = ['1','2','3'];
constructor(
) {}
getBanners(): Observable<any[]> {
return this.banners;
}
setBanners(banners: any[]): void {
this.banners = banners;
}
}
Component:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { BannerService } from './../banner/banner.service';
@Component({
selector: '.banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.sass'],
encapsulation: ViewEncapsulation.None
})
export class BannerComponent implements OnInit {
banners: any[];
constructor(private bannerService: BannerService){
}
ngOnInit() {
this.bannerService.getBanners().subscribe(banners => this.banners = banners);
}
}
Any ideas what I am doing wrong?
You should return an observable , instead you are returning an array:
For Angular <= 5.x.x
getBanners(): Observable<any[]> {
return Observable.of(this.banners);
}
For Angular >= 6.x.x
getBanners(): Observable<any[]> {
return of(this.banners);
}