Learn RxJS
Search…
take
signature: take(count: number): Observable
take(count: number): ObservableEmit provided number of values before completing.
Why use take?
take?When you are interested in only the first emission, you want to use
take. Maybe you want to see what the user first clicked on when they entered the page, or you would want to subscribe to the click event and just take the first emission. Another use-case is when you need to take a snapshot of data at a particular point in time but do not require further emissions. For example, a stream of user token updates, or a route guard based on a stream in an Angular application.💡
take is the opposite of skip where take will take the first n number of emissions while skip will skip the first n number of emissions.Examples
Example 1: Take 1 value from source
1
// RxJS v6+
2
import { of } from 'rxjs';
3
import { take } from 'rxjs/operators';
4
5
//emit 1,2,3,4,5
6
const source = of(1, 2, 3, 4, 5);
7
//take the first emitted value then complete
8
const example = source.pipe(take(1));
9
//output: 1
10
const subscribe = example.subscribe(val => console.log(val));
Copied!
Example 2: Take the first 5 values from source
1
// RxJS v6+
2
import { interval } from 'rxjs';
3
import { take } from 'rxjs/operators';
4
5
//emit value every 1s
6
const interval$ = interval(1000);
7
//take the first 5 emitted values
8
const example = interval$.pipe(take(5));
9
//output: 0,1,2,3,4
10
const subscribe = example.subscribe(val => console.log(val));
Copied!
Example 3: Taking first click location
1
<div id="locationDisplay">
2
Where would you click first?
3
</div>
Copied!
1
// RxJS v6+
2
import { fromEvent } from 'rxjs';
3
import { take, tap } from 'rxjs/operators';
4
5
const oneClickEvent = fromEvent(document, 'click').pipe(
6
take(1),
7
tap(v => {
8
document.getElementById(
9
'locationDisplay'
10
).innerHTML = `Your first click was on location ${v.screenX}:${v.screenY}`;
11
})
12
);
13
14
const subscribe = oneClickEvent.subscribe();
Copied!
Related Recipes
Additional Resources
- 🎥 💵 - André Staltz
- 🎥 - Kwinten Pisman
Last modified 1yr ago