take
- signature: take(count: number): Observable
Emit provided number of values before completing.
- Why use take
- Examples
Additional Resources

take

signature: `take(count: number): Observable`

Emit provided number of values before completing.

Why use `take`

When you are interested in only the first set number of emission, you want to
use take. Maybe you want to see what the user first clicked on when he/she
first entered the page, you would want to subscribe to the click event and just
take the first emission. There is a race and you want to observe the race, but
you’re only interested in the first who crosses the finish line. This operator
is clear and straight forward, you just want to see the first n numbers of
emission to do whatever it is you need.

If you want to take a variable number of values based on some logic, or
another observable, you can use takeUntil or
takeWhile!

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

( jsBin |
jsFiddle )

import { of } from 'rxjs/observable/of';
import { take } 'rxjs/operators';
//emit 1,2,3,4,5
const source = of(1, 2, 3, 4, 5);
//take the first emitted value then complete
const example = source.pipe(take(1));
//output: 1
const subscribe = example.subscribe(val => console.log(val));

Example 2: Take the first 5 values from source

( jsBin |
jsFiddle )

import { interval } from 'rxjs/observable/interval';
import { take } 'rxjs/operators';
//emit value every 1s
const interval = interval(1000);
//take the first 5 emitted values
const example = interval.pipe(take(5));
//output: 0,1,2,3,4
const subscribe = example.subscribe(val => console.log(val));

Example 3: Taking first click loclation

(jsFiddle)

<div id="locationDisplay">
  Where would you click first?
</div>

import { fromEvent } from 'rxjs/observable/fromEvent';
import { take, tap } 'rxjs/operators';
const oneClickEvent = fromEvent(document, 'click').pipe(
    take(1),
    tap(v => {
      document.getElementById('locationDisplay').innerHTML
        = `Your first click was on location ${v.screenX}:${v.screenY}`;
    })
  )
const subscribe = oneClickEvent.subscribe();