<file_sep>import {Component, OnInit} from '@angular/core';
import {concat, interval, merge, of} from 'rxjs';
import {map} from 'rxjs/operators';
import {createHttpObservable} from '../common/util';

@Component({
    selector: 'about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

    ngOnInit() {
        const source1$ = of(1, 2, 3);
        const source2$ = of(4, 5, 6);
        const source3$ = of(7, 8, 9);

        const result$ = concat(source1$, source2$, source3$);

        result$.subscribe(console.log);

        const interval1 = interval(1000);
        const interval2 = interval1.pipe(map(val => val * 10));
        const merge$ = merge(interval1, interval2);

        const sub = merge$.subscribe(console.log);

        setTimeout(() => sub.unsubscribe(), 3000);

        const http$ = createHttpObservable('/api/courses');
        const sub2 = http$.subscribe(console.log);

        setTimeout(() => sub2.unsubscribe());

    }

}






<file_sep>import {Component, OnInit} from '@angular/core';
import {Course} from '../model/course';
import {Observable, throwError, timer} from 'rxjs';
import {catchError, delayWhen, finalize, map, retryWhen, shareReplay} from 'rxjs/operators';
import {createHttpObservable} from '../common/util';
import {Store} from '../common/store.service';


@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

    beginnerCourses$: Observable<Course[]>;

    advancedCourses$: Observable<Course[]>;


    constructor(private store: Store) {

    }

    ngOnInit() {

        const http$ = createHttpObservable('/api/courses');

        const courses$ = http$.pipe(
            // catchError(err => {
            //     console.log('error happened', err);
            //     return throwError(err);
            // }),
            // finalize get executed when the observable completes or errors out
            // finalize(() => {
            //     console.log('finalized ...');
            // }),
            map(response => response['payload']),
            shareReplay(),
            retryWhen(errors => {
                return errors.pipe(
                    delayWhen(() => timer(2000))
                );
            })
            // 1.catch and replace: catchError(err => of([])) // catch error and return empty list of courses
            // 2. catch and rethrow and finalize



        );

        this.beginnerCourses$ = courses$.pipe(
            map((courses: Course[]) =>
                courses.filter(course => course.category === 'BEGINNER')
            ));

        this.advancedCourses$ = courses$.pipe(
            map((courses: Course[]) =>
                courses.filter(course => course.category === 'ADVANCED'))
        );

    }

}
