Error: Property 'asObservable' does not exist on type '() => any'.ts(2339) Error: Property 'subscribe' does not exist on type 'Subscription'. Did you mean 'unsubscribe'?ts(2551) Error: Property 'subscribe' does not exist on type 'void'.ts(2339) Here is the code for my data service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
gifs = new BehaviorSubject<any>([]);
constructor(private http: HttpClient) { }
getTrendingGifs(){
return this.http.get(`https://api.giphy.com/v1/gifs/trending?api_key=%${environment.giphyApiKey}&limit=50`)
.subscribe((response: any) => {
this.gifs.next(response.data);
});
}
searchGifs(gifName: string){
return this.http.get(`https://api.giphy.com/v1/gifs/search?q=${gifName}&api_key=%${environment.giphyApiKey}&limit=50`)
.subscribe((response: any) => {
this.gifs.next(response.data);
});
}
getGifs(){
return this.getGifs.asObservable();
}
}
This is my search component code:
export class SearchComponent implements OnInit {
constructor(private dataService: DataService) { }
ngOnInit(): void {
}
search(searchTerm: string){
if (searchTerm !== ''){
this.dataService.searchGifs(searchTerm)
.subscribe((response: any) => {
console.log('Search Data', response);
});
}
}
}
Below is the content of my gifs component:
import { ThisReceiver } from '@angular/compiler';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from '../data.service';
@Component({
selector: 'app-gifs',
templateUrl: './gifs.component.html',
styleUrls: ['./gifs.component.css']
})
export class GifsComponent implements OnInit, OnDestroy {
gifs: any[] = [];
subscription: Subscription;
constructor(private dataService: DataService) { }
ngOnInit(): void {
this.dataService.getTrendingGifs()
this.subscription = this.dataService.getGifs()
.subscribe((response: any) => {
this.gifs = response;
});
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}