46 | 
49 | | Microsoft Web Application Development | 40 ||||
|
45 |
46 | |
47 |
48 |
49 | |
50 | ||
Observer can emit either new values and errors or complete the observable. Each time we subscribe to the observable, 17 | the observer function fires (cold observable)
18 |Observable.of will emit the icons as a single item-array. The async keyword is used to subscribe and listen 35 | to values emitted by the observable
36 |Creates an Observable that emits a sequence of integers spaced by a given time interval
49 |Emitted item is array: {{ofEmittedIsArray}} Total Items: 62 | {{ofEmittedVal.length}}
63 |Converts arguments to an observable sequence.
66 |Emitted item is array: {{fromEmittedIsArray}} Emitted item is Object: 79 | {{fromEmittedIsObject}}
80 |
81 | Object:
82 |
Converts arguments to an observable sequence.
87 |
3 |
4 | // Observer
5 | const users$ = new Observable(observer => {
6 | for (let i = 0; i < 4; i++) {
7 | setTimeout(function () {
8 | const userId = Math.floor((Math.random() * 9) + 1);
9 | observer.next(self.ds.getUsersSync(userId));
10 | }, (i + 1) * 2000);
11 | }
12 | });
13 |
14 | users$.subscribe(user => {
15 | this.users.push(user);
16 | });
17 |
18 | // Observable.Of
19 | const mdIcons: [string] = ['home', 'donut_large', 'alarm_on', 'announcement', '3d_rotation', 'copyright',
20 | 'check_circle', 'language'];
21 | this.icons$ = Observable.of(mdIcons);
22 |
23 | // Observable.timer
24 | Observable.timer(0, 1000).take(5).subscribe(value => this.seconds--);
25 |
26 | // Observable.Of(array)
27 | this.ds.getAllPosts().subscribe(val => {
28 | this.ofEmittedVal = _.cloneDeep(val);
29 | this.ofEmittedIsArray = val instanceof Array;
30 | });
31 |
32 | getAllPosts() {
33 | return Observable.of(MOCK_POSTS);
34 | }
35 |
36 | // Observable.from(array)
37 | this.ds.getUsers().subscribe(val => {
38 | this.fromEmittedVal = val;
39 | this.fromEmittedIsArray = val instanceof Array;
40 | this.fromEmittedIsObject = val instanceof Object;
41 | });
42 |
43 | getUsers(): Observable {
44 | return Observable.from(MOCK_USERS);
45 | }
46 |
47 |
48 |
49 | `;
--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/home/home.component.css
--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 | Hot observables emit values all the time, it's us that we listen only if we subscribe
9 |
3 |
4 | sliderValue = 0;
5 | numbersSubject$: Subject = new Subject();
6 | latestNumbers: number[] = [];
7 | buttons: number[] = [];
8 | total = 0;
9 |
10 | addNumber(number) {
11 | this.sliderValue++;
12 | this.numbersSubject$.next(number);
13 | }
14 |
15 | bufferCount() {
16 | this.numbersSubject$.bufferCount(5).subscribe((array: number[]) => {
17 | console.log(array);
18 | this.total = 0;
19 | this.sliderValue = 0;
20 | this.latestNumbers = [];
21 | array.forEach(number => {
22 | this.total += number;
23 | this.latestNumbers.push(number);
24 | });
25 | });
26 | }
27 |
28 |
29 | `;
30 |
--------------------------------------------------------------------------------
/src/app/operators/filter/filter.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/filter/filter.component.css
--------------------------------------------------------------------------------
/src/app/operators/filter/filter.component.html:
--------------------------------------------------------------------------------
1 | API call on condition...
23 |
3 |
4 | selectedUser$: Subject = new Subject();
5 | userPosts: { [key: number]: any[] } = {};
6 | loadedPosts: any[] = [];
7 | loading = false;
8 |
9 | this.selectedUser$
10 | .do(userId => {
11 | if (this.userPosts[userId]) {
12 | this.loadedPosts = [...this.userPosts[userId]];
13 | }
14 | })
15 | .filter(userId => !this.userPosts[userId])
16 | .subscribe((userId) => {
17 | this.loading = true;
18 | this.loadedPosts = [];
19 | this.ds.getUserPosts(userId).subscribe((records) => {
20 | this.loading = false;
21 | this.userPosts[userId] = records;
22 | this.loadedPosts = [...records];
23 | }
24 | );
25 | });
26 |
27 | getUserPosts(userId: number): Observable {
28 | return Observable.of(_.filter(MOCK_POSTS, p => p.userId === userId)).delay(2000);
29 | }
30 |
31 |
32 | `;
33 |
--------------------------------------------------------------------------------
/src/app/operators/latest/latest.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/latest/latest.component.css
--------------------------------------------------------------------------------
/src/app/operators/latest/latest.component.html:
--------------------------------------------------------------------------------
1 | {{user.name}}
17 |The zip operator will subscribe to all inner observables, waiting for each to emit a value. Once this occurs, 22 | all values with the corresponding index will be emitted. This will continue until at least one inner observable 23 | completes. 24 |
25 |Find the lowest values among products
33 |Combines the source Observable with other Observables to create an Observable whose values are calculated from 141 | the latest values of each, only when the source emits..
142 |
3 |
4 | startZipping(seconds) {
5 | this.users = [];
6 | this.sliderValue = 0;
7 | this.sliderDisabled = false;
8 |
9 | const timer$ = Observable.timer(1000, 1000).take(seconds);
10 |
11 | this.ds.wsOnUser(1000, 10).zip(timer$, (user, sec) => {
12 | return { user, sec };
13 | }).subscribe(info => {
14 | this.users.push(info.user);
15 | this.sliderValue = info.sec + 1;
16 | },
17 | error => console.log(error),
18 | () => this.sliderDisabled = true);
19 | }
20 |
21 | // onUser
22 | wsOnUser(delay, size?: number): Observable {
23 | return Observable
24 | .interval(delay).take(size === undefined ? MOCK_USERS.length : size)
25 | .map(i => MOCK_USERS[i]);
26 | }
27 |
28 |
29 | `;
30 |
31 | export const sampleCodeCombine = `
32 |
33 |
34 | startWithLatestFrom() {
35 | const self = this;
36 | this.selectedOption$
37 | .withLatestFrom(this.selectedUser$)
38 | .subscribe(([option, user]) => {
39 | if (self.operator === 'withLatestFrom') {
40 | console.log('withLatestFrom');
41 | this.selectedUser = user;
42 | this.selectedUserPosts = _.filter(this.ds.getPostsSync(), (p: any) => p.userId === this.selectedUser.id);
43 | }
44 | });
45 | }
46 |
47 | startCombineLatest() {
48 | const self = this;
49 | this.selectedOption$
50 | .combineLatest(this.selectedUser$)
51 | .subscribe(([option, user]) => {
52 | if (self.operator === 'combineLatest') {
53 | console.log('combineLatest');
54 | this.selectedUser = user;
55 | this.selectedUserPosts = _.filter(this.ds.getPostsSync(), (p: any) => p.userId === this.selectedUser.id);
56 | }
57 | });
58 | }
59 |
60 |
61 | `;
--------------------------------------------------------------------------------
/src/app/operators/merge-map/merge-map.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/merge-map/merge-map.component.css
--------------------------------------------------------------------------------
/src/app/operators/merge-map/merge-map.component.html:
--------------------------------------------------------------------------------
1 | List the different companies for all users
10 |
3 |
4 | this.ds.getUsers()
5 | .mergeMap(user => Observable.of(user.company))
6 | .subscribe(company => this.companies.push(company));
7 |
8 | // getUsers()
9 | getUsers(): Observable {
10 | return Observable.from(MOCK_USERS);
11 | }
12 |
13 | // MOCK_USERS
14 | const MOCK_USERS = [
15 | {
16 | id: 1,
17 | name: 'Leanne Graham',
18 | username: 'Bret',
19 | email: 'Sincere@april.biz',
20 | address: {
21 | street: 'Kulas Light',
22 | suite: 'Apt. 556',
23 | city: 'Gwenborough',
24 | zipcode: '92998-3874',
25 | geo: {
26 | lat: '-37.3159',
27 | lng: '81.1496'
28 | }
29 | },
30 | phone: '1-770-736-8031 x56442',
31 | website: 'hildegard.org',
32 | company: {
33 | name: 'Romaguera-Crona',
34 | catchPhrase: 'Multi-layered client-server neural-net',
35 | bs: 'harness real-time e-markets'
36 | }
37 | },
38 | //...
39 |
40 |
41 | `;
42 |
--------------------------------------------------------------------------------
/src/app/operators/merge/merge.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/merge/merge.component.css
--------------------------------------------------------------------------------
/src/app/operators/merge/merge.component.html:
--------------------------------------------------------------------------------
1 | Different streams may emit at different times.
20 |
3 |
4 | enterUser$: Subject = new Subject();
5 | leaveUser$: Subject = new Subject();
6 |
7 | this.source$ = Observable.merge(
8 | this.enterUser$.map(user => new UserEvent('Enter', user)),
9 | this.leaveUser$.map(user => new UserEvent('Leave', user))
10 | );
11 |
12 | this.source$.subscribe((event) => this.processUser(event));
13 |
14 | // process user
15 | processUser(event: UserEvent) {
16 |
17 | if (event.type === 'Enter') {
18 | event.user.color = 'primary';
19 | console.log(event.user);
20 | this.users.push(event.user);
21 | } else {
22 | const user: any = _.find(this.users, (u: any) => u.id === event.user.id);
23 | if (user) {
24 | user.color = 'warn';
25 | }
26 | }
27 | }
28 |
29 |
30 | `;
31 |
--------------------------------------------------------------------------------
/src/app/operators/operators.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/operators.component.css
--------------------------------------------------------------------------------
/src/app/operators/operators.component.html:
--------------------------------------------------------------------------------
1 | 2 | operators works! 3 |
4 | -------------------------------------------------------------------------------- /src/app/operators/operators.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { OperatorsComponent } from './operators.component'; 4 | 5 | describe('OperatorsComponent', () => { 6 | let component: OperatorsComponent; 7 | let fixture: ComponentFixtureFind the lowest values among products
21 |
3 |
4 | this.ds.getProducts()
5 | .reduce((acc, value) => {
6 | if (acc.price < value.price) {
7 | return acc;
8 | } else {
9 | return value;
10 | }
11 | }).subscribe(selected =>
12 | _.find(this.products, p => p.id === selected.id).selected = true
13 | );
14 |
15 | getProducts() {
16 | return Observable.from(MOCK_PRODUCTS);
17 | }
18 |
19 |
20 | `;
21 |
--------------------------------------------------------------------------------
/src/app/operators/scan/sample-code.ts:
--------------------------------------------------------------------------------
1 | export const sampleCode = `
2 |
3 |
4 | likesSubject: Subject = new Subject();
5 | likesSubscription: Subscription;
6 |
7 | dislikesSubject: Subject = new Subject();
8 | dislikesSubscription: Subscription;
9 |
10 | _.cloneDeep(this.ds.getImagesSync()).forEach(image => this.album.images.push(image));
11 |
12 | this.likesSubscription = this.likesSubject
13 | .scan((acc, value) => acc + value)
14 | .subscribe(totalLikes => this.album.likes = totalLikes);
15 |
16 | this.dislikesSubscription = this.dislikesSubject
17 | .scan((acc, value) => acc + value)
18 | .subscribe(totalDislikes => this.album.dislikes = totalDislikes);
19 |
20 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/app/operators/scan/scan.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/scan/scan.component.css
--------------------------------------------------------------------------------
/src/app/operators/scan/scan.component.html:
--------------------------------------------------------------------------------
1 | Each time a like or a dislike is being emitted, the corresponding total value is calculated
34 |
3 |
4 | sliderValue: 0;
5 | selectedUser$: Subject = new Subject();
6 | userPosts: { [key: number]: any[] } = {};
7 | loadedPosts: any[] = [];
8 | loading = false;
9 |
10 | ngOnInit() {
11 |
12 | this.selectedUser$
13 | .do(user => console.log(user))
14 | .map(u => u.id)
15 | .switchMap((id) => this.loadUserPosts(id))
16 | .subscribe((records) => {
17 | console.log(records);
18 | this.loading = false;
19 | this.loadedPosts = [...records];
20 | });
21 | }
22 |
23 | loadUserPosts = (userId: number): Observable => {
24 | const self = this;
25 | self.sliderValue = 0;
26 | this.loading = true;
27 |
28 | return Observable.timer(0, 1000).take(10)
29 | .do(item => self.sliderValue++)
30 | .filter(item => item === 9)
31 | .switchMap(() => self.ds.getUserPosts(userId));
32 | }
33 |
34 |
35 | `;
36 |
--------------------------------------------------------------------------------
/src/app/operators/switch-map/switch-map.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/operators/switch-map/switch-map.component.css
--------------------------------------------------------------------------------
/src/app/operators/switch-map/switch-map.component.html:
--------------------------------------------------------------------------------
1 | {{10 - sliderValue}} seconds before REST API response..
26 |If you change selected user before the API returns, switchMap will cancel the in-flight network request
27 |
3 |
4 | userStatus$ = new BehaviorSubject({ user: { isLoggedIn: false, name: '' } });
5 | isLoggedIn$ = this.userStatus$.map((u: any) => u.user);
6 |
7 | trackUser() {
8 | this.isLoggedIn$.subscribe(status => console.log(status));
9 | }
10 |
11 | signin(username, password) {
12 | this.userStatus$.next({ user: { isLoggedIn: true, name: username } });
13 | }
14 |
15 | signout() {
16 | this.userStatus$.next({ user: { isLoggedIn: false, name: '' } });
17 | }
18 |
19 |
20 | `;
21 |
--------------------------------------------------------------------------------
/src/app/subjects/subjects.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chsakell/rxjs-in-angular/aa4563495d88542529559b6a7887dca8993a19b1/src/app/subjects/subjects.component.css
--------------------------------------------------------------------------------
/src/app/subjects/subjects.component.html:
--------------------------------------------------------------------------------
1 | Subject act both as an Observable and an Observer
44 |