Data Composition with RxJS | Deborah Kurata

What people said

Strong rec user2216584 · 2019-07 · Stack Overflow · on “Angular - How to subscribe the same service responses with different parameters (multiple API calls)?”

@ahmednabil88 You should understand how various operators could be used to compose your final observable. You can still process your data even call some other apis in the observable operators chain with out subscribe. Subscription should only be done by the caller. Subscription in the service is just a bad design. It absolutely not needed. Go through this awesome video from ngconf 2019 - [this video]

Recommends peinearydevelopment · 2019-10 · Stack Overflow · on “Filter a List By Category - Angular 8”

I have created a StackBlitz [LINK] with the code. There are some minor modifications to the html you provided above. There is also a 'firebase' mock so you can see that I'm using the data you provided above as well. You will probably want to look there for the full example. Also, a lot of the methods utilized below are from amazing speakers like Deborah Kurata [this video] and others. In regards to your question about filtering though, import { Component } from '@angular/core'; import { FirebaseStub } from './firebase.stub'; import { Observable, BehaviorSubject, Subject } from 'rxjs'; import { mergeMap, map, tap } from 'rxjs/operators'; @Component({ selector: 'my-app', templateUrl: './app.compone

Recommends DeborahK · 2019-11 · Stack Overflow · on “Angular 8 and setting observable inside subscription”

As others have said, using a service is the recommended approach for all of your switchMap ing. Here is an example from one of my services: In a service productsWithCategory$ = combineLatest([ this.products$, this.productCategoryService.productCategories$ ]).pipe( map(([products, categories]) => products.map(product => ({ ...product, price: product.price * 1.5, category: categories.find(c => product.categoryId === c.id).name, searchKey: [product.productName] }) as Product) ), shareReplay(1) ); Each component can then subscribe to this Observable. And since it uses shareReplay(1) , each subscriber will get the same emitted items. In my code, I use asyncPipe in both of my components to do the

Recommends DeborahK · 2019-11 · Stack Overflow · on “Angular: How to correctly access data in Component”

There are several questions in your post, I'll address the part about getting an id. I have a List component that displays a list of products. The user clicks on a product to display/edit it. I handle that with a Subject/BehaviorSubject In the service private productSelectedSubject = new BehaviorSubject<number>(0); productSelectedAction$ = this.productSelectedSubject.asObservable(); In the component (when the user clicks a product) onSelected(productId: number): void { this.productService.selectedProductChanged(productId); } In the service I then have a stream property in the service whose pipeline is automatically re-executed each time a different selected product is emitted: selectedProduc

Recommends DeborahK · 2020-07 · Stack Overflow · on “RxJS shareReplay() does not emit updated value”

This might help: [this video] Or if you have Pluralsight accountt: [LINK] (If you don't have a Pluralsight account, reach out to me on Twitter @deborahkurata and I'll get you a month pass.)

Recommends DeborahK · 2020-08 · Stack Overflow · on “How to add the property to the data model in angular, which only used for displaying on the ui list page”

Since you tagged the question with RxJS, here is an RxJS technique I used to map a set of products with a category Id to the set of categories to get the category name to display in the UI. productsWithCategory$ = combineLatest([ this.products$, this.productCategoryService.productCategories$ ]).pipe( map(([products, categories]) => products.map(product => ({ ...product, category: categories.find(c => product.categoryId === c.id).name }) as Product) ) ); I would assume you could use something similar to map your IdentifyProviders and Providers. I have a video with more details here: [this video]

Recommends DeborahK · 2020-08 · Stack Overflow · on “How to return data coming from response”

As others have said, you can't treat an http request (the http.get) as procedural code. The http request is asynchronous and the code within the .pipe() method is only executed after the data is returned from the server. So your getPlace() method, won't be able to simply return data by calling the _getPlace() method. Instead of fighting against the way this works and trying to "fix" it. I would suggest that you handle both as Observables. My code in a similar situation looks like this: Service import { Observable, of, throwError } from 'rxjs'; import { catchError, tap } from 'rxjs/operators'; getProducts(): Observable<IProduct[]> { if (this.products) { return of(this.products); } return this

Recommends DeborahK · 2021-01 · Stack Overflow · on “can I pass observable as function parameter?”

You could use a more declarative approach. Something like this: // Filtered products filteredProducts$ = combineLatest([ this.allProducts$, this.filterAction$]) .pipe( // Perform the filtering map(([products, filter]) => this.performFilter(products, filter)) ); Then you don't need to pass Observables into procedures. The code that actually does the filtering takes in the products and filter, not their associated observables. PLUS: The pipe operations will re-execute every time a new value is emitted into either stream. See this for more information: [this video]

Recommends DeborahK · 2021-01 · Stack Overflow · on “Understanding RxJS BehaviorSubject”

As some of the replies have implied, you don't need to wrap the Observable provided from an HTTP call in another Observable (the `BehaviorSubject`). You already have an Observable you can work with. Consider trying a declarative approach to your Observables. That will make notifications easier. See this for more information: [this video]

Recommends Gustavo Alarcón · 2021-02 · Stack Overflow · on “Angular memory optimization with NgRx store to avoid memory leaks”

Your actual methods to handle subscriptions are great, but I think the best way to handle rxjs code in Angular is to use the async pipe and good data composition. You have to think in all the data needed to render your component and combine it to get just one final observable to be subscribed in HTML, in that way you can take advantage of ChangeDetectionStrategy and trackBy for *ngFor with reactive data. Follow these links to get a better undertanding: Data Composition [this video] RxJs Best Practices [LINK] Hope I helped you a little.