Exposing Observable in angular with library

Question

I am facing a problem on how to implement an observable correctly in a library (angular) to be an api.

The library displays a div with some text inside. Inside the component of the library, there is a boolean that I use to display the div html element. I want to build an observable based on that boolean to be exposed for the user in order to let them know if the div is displayed or not and do stuff.

Inside project, I created a service that consumes observable on bolean. Inside the component of the div i am importing that service and when there is a boolean true or false i set the value to functions of the services. I am using rxjs ( quiet easy to use)..


private Boolean: BehaviorSubject<boolean>;

export class getDivStatus {
public getTheBoolean(): Observable<boolean> {
    return this.theBoolean.asObservable();
}

public setTheBoolean(newValue: boolean): void {
    this.theBoolean.next(newValue);
}
}

My component

...
import {getDivStatus } from /getDivStatus.service.ts
...

export class divCom implement oninit {
constructor(private divservice: getDivStatus)
ngOnInit() {
booleanDiv = true;
this.divservice.setTheBoolean(true);

if(anotehrcondition) {booleanDiv = false; this.divservice.setTheBoolean(false);}

}

// Building up the library and implement it on an angular project :

app.compoennt.ts

import {librarytotest} from librarytotest;

@compoennt({
...})

export class AppCompoet implements oninit{
ngoninit() {
this.librarytotest.getboolean().subscribe({x => console.log(x)});

}
}

On another side project, after building up the library, I want to subscribe to those events, but i don't know how i can achieve that. What the better way or the proper manner to achieve do that ?

AliWieckowicz AliWieckowicz · Accepted Answer · 2019-05-16T12:13:20

If I'm understanding the objective correctly, I think the service below is a good example of how to create a service that exposes an observable and implements Behavior Subject as both an observer and observable. I can inject this service into multiple components as an input and subscribe to the service in other components that need to observe changes. This example was used to manage application state. I use an implementation of an interface to set the observable type, but a Boolean would be fine too.

import { Injectable } from '@angular/core'
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { SearchParams, Filter } from '../components/searchParam/searchparams.entity';
import { ISearchParams } from '../components/searchParam/searchparams.interface';
import { parkDetails } from '../services/getParkDetails.service';


@Injectable()
export class searchParamStateService {
    private _searchParamSource: BehaviorSubject<ISearchParams>;
    searchParams: Observable<ISearchParams>;
    private dataStore: ISearchParams;

    constructor() {    
        this.dataStore = new SearchParams('', [],[],[]);
        this._searchParamSource = new BehaviorSubject<ISearchParams>(this.dataStore);
        this.searchParams = this._searchParamSource.asObservable();        
    }


    // called when the searchtextbox is updated in search component
    changeSearchString(searchString: string) {
        this.dataStore.SearchString = searchString;
        this._searchParamSource.next(Object.assign({}, this.dataStore));
    }


    setXYParams(lat, long) {  
        //console.log('searchparamstate.service setXYParams: ' + lat + '  ' + long);
        this.dataStore.SearchX = lat;
        this.dataStore.SearchY = long;
        this._searchParamSource.next(Object.assign({}, this.dataStore));

    }

}

Then in components I can observe or populate to the state:

/inject service into components

...

searchstateService.data.subscribe(data => {
  //do what ever needs doing when data changes
})

...

//update the value of data in the service
searchstateService.changeSearchString('new search string');

Exposing Observable in angular with library

1 Answers