Functional Reactive Programming for Angular Developers - RxJs and Observables

01.ts

const obs = interval(1000).pipe(take(5));

02.ts

const obs = interval(1000)
           .pipe(
               take(5),
               tap(i => console.log(i) )
           );

           

03.ts

const obs = interval(1000)
           .pipe(
               take(5),
               tap(i => console.log("obs value "+ i) )
           );

obs.subscribe(value => console.log("observer 1 received " + value));

obs.subscribe(value => console.log("observer 2 received " + value));

04.ts

const obs = interval(500)
           .pipe(
               take(5),
               map(i => 2 * i ) 
           );

            

05.html

<form [ngForm]="form" (ngSubmit)="onSubmit()">
   <p>
        <label>First Name:</label>
        <input type="text" ngControl="firstName">
   </p>
</form>

06.ts

this.form.valueChanges
    .pipe(
        map((value) => {
            value.firstName = value.firstName.toUpperCase();
            return value;
        }),
        filter((value) => this.form.valid)
    )
    .subscribe(validValue => ...);
        
        

07.ts

const obs = interval(500).pipe(take(5));

var reduced = obs.pipe(
  reduce((state, value) => state + value , 0)
);

reduced.subscribe(total => console.log("total =" + total));

08.ts

const obs = interval(500).pipe(take(5));

var scanObs = obs.pipe(
  scan((state, value) => state + value , 0)
);

scanObs.subscribe(total => console.log(total));

09.ts

const obs = interval(500)
    .pipe(
        take(5),
        tap(i => console.log("obs value "+ i)),
        shareReplay()
    );

obs.subscribe(value => console.log("observer 1 received " + value));

obs.subscribe(value => console.log("observer 2 received " + value));