Scribd
Upload
26 views30 pages

RxJS Stream Combination Techniques

The document summarizes three RxJS operators: combineLatest, forkJoin, and withLatestFrom. combineLatest emits an array of latest values from all observables. forkJoin emits when all observables complete. withLatestFrom emits a new value by combining the latest values of the source and other observables. An example shows using combineLatest to enrich a products array with category names by combining it with a product categories array.

Uploaded by

king kane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views30 pages

RxJS Stream Combination Techniques

The document summarizes three RxJS operators: combineLatest, forkJoin, and withLatestFrom. combineLatest emits an array of latest values from all observables. forkJoin emits when all observables complete. withLatestFrom emits a new value by combining the latest values of the source and other observables. An example shows using combineLatest to enrich a products array with category names by combining it with a product categories array.

Uploaded by

king kane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

combineLatest

forkJoin
withLatestFrom
combineLatest

combineLatest([a$, b$, c$])


combineLatest

combineLatest([audience$, online$, phone$])


combineLatest
combineLatest
-
-

-
-
combineLatest
forkJoin

forkJoin([a$, b$, c$])


forkJoin

forkJoin([you$, yourPartner$, yourNeighbor$])


forkJoin

forkJoin
-
-

-
-
forkJoin
withLatestFrom

a$.pipe(withLatestFrom(b$, c$))
withLatestFrom

apples$.pipe(withLatestFrom(sticks$, caramel$))
withLatestFrom
withLatestFrom
-
-

-
-
withLatestFrom
export interface Product { export interface Product {
id: number; id: number;
productName: string; productName: string;
productCode?: string; productCode?: string;
description?: string; description?: string;
price?: number; price?: number;
categoryId?: number; categoryId?: number;
} category?: string;
}
products$=this.http.get<Product[]>(this.url)
.pipe(
map(products =>
products.map(product => ({
...product,
price: product.price * 1.5,
category: ???
}) as Product)
));

category: this.getCategory(product.categoryId)

productCategories$ = this.http.get<ProductCategory[]>(this.productCategoriesUrl);
productsWithCategory$ = combineLatest([
this.products$,
this.productCategories$
]);

productsWithCategory$ = forkJoin([
this.products$,
this.productCategories$
]);

productsWithCategory$ = this.products$
.pipe(
withLatestFrom(this.productCategories$)
);
product$ = this.http.get<Product[]>(this.url);

productCategories$ = this.http.get<ProductCategory[]>(this.productCategoriesUrl);

productsWithCategory$ = combineLatest([
this.products$,
this.productCategories$
])
.pipe(
map(([products, categories]) =>
products.map(product => ({
...product,
price: product.price * 1.5,
category: categories.find(
c => product.categoryId === c.id
).name
}) as Product))
);
productsWithCategory$ = combineLatest([
this.products$,
this.productCategories$
])
.pipe(
map(([products, categories]) =>
products.map(product => ({
...product,
price: product.price * 1.5,
category: categories.find(
c => product.categoryId === c.id
).name
}) as Product))
);
combineLatest

combineLatest([a$, b$, c$])

forkJoin
forkJoin([a, b$, c$])

withLatestFrom

a$.pipe(withLatestFrom(b$, c$))
combineLatest([a$, b$, c$])
forkJoin([a$, b$, c$])
a$.pipe(withLatestFrom(b$, c$))

[a1, b1, c1]


productsWithCategory$ = combineLatest(
this.products$,
this.productCategories$
)
.pipe(
map([products, categories] =>
products.map(product => ({
...product,
category: categories.find(
c => product.categoryId === c.id
).name
}) as Product))
);

You might also like