How and When to use subscribe? - rxjs

Question

Im very new to typescript.
I'm trying to understand the Observables but I'm kinda lost here.
The function below searches for videos on Youtube API v3.
Is it a good approach?
Is subscribing inside a function which will be called many times a good idea?
This function is called whenever user types something.
Should I have an unsubscribe somewhere?
searchVideos(searchbar: any): void{
const typedValue: string = searchbar.srcElement.value;
if(typedValue.length > 2){
this.videosList = this.youtubeProvider.searchVideos(typedValue);
this.videosList.subscribe(data => {
if( data.length == 0 ){
this.notFoundAnyVideo = true;
}else{
this.notFoundAnyVideo = false;
}
})
}
}

Answer 1

It's a good question!
They are some ways to answer your question:
1/ you can debounce the action which call your function
Imagine, your action is triggered by a keyup in input field:
HTML
<input type="text" (keyup)="onSearchKeyup(this.value, $event)">
Component
export class MyComponent implements OnInt {
onSearch$: Subject<string>
ngOnInt(): void {
this.onSearch$
.debounceTime(500) //-> put your time here
.subscribe(search => searchVideos(search)
}
onSearchKeyup(search: string, e: any) {
this.onSearch$.next(search)
e.preventDefault()
}
}
2/ you can cancel the observable with takeUntil
Component
export class MyComponent implements OnInt {
onStopSearch$: Subject<void> = new Subject<void>();
onSearchKeyup(search: string, e: any) {
this.onStopSearch$.next()
this.searchVideos(string)
e.preventDefault()
}
private searchVideos(search: string): void{
if(typedValue.length > 2){
this.videosList = this.youtubeProvider.searchVideos(typedValue);
this.videosList
.takeUntil(this.onSearchStop$)
.subscribe(data => {
if( data.length == 0 ){
this.notFoundAnyVideo = true;
}else{ this.notFoundAnyVideo = false; }
})
}
}
}
Of course you can combine 1 and 2
Why I use takeUntil to cancel my requests: https://medium.com/#benlesh/rxjs-dont-unsubscribe-6753ed4fda87

Answer 2

I suppose you could use RxJS all the way through, cause its reactive paradigm lends itself very well for search components. Take a look at the code below, I implemented variations of it in few applications.
import {Component, ViewChild, ElementRef} from "#angular/core";
#Component({
selector: 'search',
styleUrls: ['./search.component.scss'],
template: `
<form #searchBoxEl action="" class="search-form" [formGroup]="form">
<fieldset>
<input #searchBoxEl type="text" placeholder='Search for Youtube videos'
autocomplete="off" />
<nwum-list (itemSelected)="onItemSelect($event)"></nwum-list>
</fieldset>
</form>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SearchComponent implements OnInit {
#ViewChild('searchBoxEl') searchBoxEl: ElementRef;
componentDestroyed$: Subject<void> = new Subject<void>();
videosList: Video[];
constructor(public videoService: VideoService){}
ngOnInit(){
subscribeToSearchQueryChanges();
}
subscribeToSearchQueryChanges(){
const minNumOfChars = 2;
Observable.fromEvent(this.searchBoxEl.nativeElement, 'keyup')
.debounceTime(300)
.pluck('target', 'value')
.map(value => value.trim())
// .map(() => this.searchBoxEl.nativeElement.value.trim())
.filter(value => value.length >= minNumOfChars)
.takeUntil(this.componentDestroyed$)
.switchMap(value => this.videoService.fetchVideos(value))
.subscribe((videos: Video[]) => {
//show videos, etc
this.videosList = this.videoService.groupSuggestions(suggestions);
}, err => {
console.error('failed fetching videos', err);
this.removeAllSubscriptions();
this.subscribeToSearchQueryChanges();
});
this.addSubscription(sub);
}
ngOnDestroy() {
this.removeAllSubscriptions();
}
removeAllSubscriptions(){
this.componentDestroyed$.next();
this.componentDestroyed$.complete();
}
}