CODEWITHSUNDEEP
angularobservable
Ricardo Sanchez Santos
Ricardo Sanchez Santos

Reputation: 544

Should i use observables again after i suscribe to one?

I'm new to angular, I'm working with another developer who also is new and we are on a discussion if should we use observables or not.

searchResourcesBasic(queryResources: IQueryResourceEntityResource){
    let params = new HttpParams();
    params = params.append("resourceTypeId", queryResources.resourceTypeId.toString())
    return this.http.get<ISearchResourceEntityResource[]> 
   (this._constructFullAPIUrl(`search/Resources`), 
   { params });
}

searchProjectsBasic(projectResourceBasicSearch: IProjectResourceBasicSearch) {
    const params = new HttpParams();
    params.set('id', projectResourceBasicSearch.id.toString());
    params.set('projectNum', projectResourceBasicSearch.projectNum);
    params.set('projectName', projectResourceBasicSearch.projectName);
    return this.http.get<IProjectResourceBasicSearch>(this._constructFullAPIUrl(`search/projects`), { 
    params });
}

So in the respective components we subscribe to this and receive the data we want, and we need to transfer it to another component that has no relationship with it (it's not a parent or child component).

So we searched a solution on Google and we found that we could make a service to transfer the data

export class TransfereService {

    private libraryData: ISearchLibraryItemResource[];
    private resourceBasicData: ISearchResourceEntityResource[];
    private currentSearchResults = new Observable<IProjectResourceBasicSearch>();

    setLibraryData(data) {
        localStorage.setItem("libraryItemsData", JSON.stringify(data));
        this.libraryData = data;
    }

    getLibraryData() {
        return this.libraryData;
    }

    //////////this is mine without observable/////////////
    setResourceBasicData(data) {
        localStorage.setItem("resourceBasicData", JSON.stringify(data));
        this.resourceBasicData = data;
    }

    getResourceBasicData() {
        return this.resourceBasicData;
    }

    //////////// This is his method with an observable/////////////////
    setSearchResults(newSearchResults: Observable<IProjectResourceBasicSearch>) {
        this.currentSearchResults = newSearchResults;
    }

    getSearchResults() {
        return this.currentSearchResults;
    }

}

Basically we have a form, on submit we call the API, get the response and we should display it in another view, I don't see the point in use observables again when passing the data between views/components.

//////////////////////////////////////////////////////////////////////////// Edit /////////////////////////////////////////////////////////////////////////// Base in a comment below, i should add that the results view, can be access anytime the user wants, not only when he makes a search and fills the form.

The difference is that if the user hasn't made a search, the results view should be empty.

That's why I call the API in the search view, or the view with the form as i was calling it above.

And the results view should be able to handle multiple results, the application has multiple forms/search views.

-Search service: call to the API with an observable (the first code example above)

-Transfere service: Recieves the data from the search view to store it to a variable and pass it to the results view (this is the part where the other programmer wants to add an observable).

-Search/Form view: Form is filled -> suscribe to service calling the API -> pass the data to the transfere service -> redirect to results view

-Results view: Looks for the data every time it's opened on the ngOnInit and if there's any it displays it (this is where the other programmer subscribes to the transfere service).

The data can't be change, or shouldn't be changed anywhere unless the user makes a new search, but in that scenario I replace it in my transfere service. And I have multiple variables there for the multiple forms that the application has

Upvotes: 0

Views: 56

Answers (1)

MAYANK17
MAYANK17

Reputation: 41

To keep the data consistent between your views, you should use an observable. All the components that subscribe to that observable would get the value when observable emits a new value. Otherwise, if one components sets the data using service other components wouldn't be able to know and there would be inconsistencies in your application.

Upvotes: 1

Related Questions