Fin sección 10

src/operadores-combinacion/01-startWith-endWith.ts

@@ -0,0 +1,9 @@
+import { of } from 'rxjs';
+import { startWith, endWith} from 'rxjs/operators';
+
+const numeros$ = of(1,2,3).pipe(
+    startWith('a','b','c'),
+    endWith('x','y','z')
+);
+
+numeros$.subscribe(console.log);

src/operadores-combinacion/02-lab-startWith-loadingBackground.ts

@@ -0,0 +1,22 @@
+import { ajax } from 'rxjs/ajax';
+import { startWith } from 'rxjs/operators';
+// Referencias
+const loadingDiv = document.createElement('div');
+loadingDiv.classList.add('loading');
+loadingDiv.innerHTML = 'Cargando';
+
+const body = document.body;
+
+// Stream
+ajax.getJSON('https://reqres.in/api/users/2?delay=3').pipe(
+    startWith(true)
+).subscribe( resp => {
+
+    if(resp === true){
+        body.append(loadingDiv);
+    } else {
+        document.querySelector('.loading').remove();
+    }
+
+    console.log(resp)
+})

src/operadores-combinacion/03-metodo-concat.ts

@@ -0,0 +1,10 @@
+import { concat, interval } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+const interval$ = interval(1000);
+
+concat(
+    interval$.pipe(take(3)),
+    interval$.pipe(take(2)),
+    [1,2,3,4]
+).subscribe(console.log)

src/operadores-combinacion/04-metodo-merge.ts

@@ -0,0 +1,10 @@
+import { fromEvent, merge } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+const keyup$ = fromEvent(document,'keyup');
+const click$ = fromEvent(document,'click');
+
+merge(
+    keyup$.pipe(map(e => e.type)), 
+    click$.pipe(map(e => e.type))
+).subscribe(console.log)

src/operadores-combinacion/05-metodo-combineLatest.ts

@@ -0,0 +1,25 @@
+import { combineLatest, fromEvent, merge } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+const input1 = document.createElement('input');
+const input2 = document.createElement('input');
+
+input1.placeholder = 'email@gmail.com';
+
+input2.placeholder = '*******';
+input2.type = 'password';
+
+document.body.append(input1, input2);
+
+// Helper
+const getInputStream = (elem: HTMLElement) => {
+    return fromEvent<KeyboardEvent>(elem, 'keyup').pipe(
+        map(e => e.target['value'])
+    );
+}
+
+
+combineLatest([
+    getInputStream(input1),
+    getInputStream(input2)
+]).subscribe(console.log)

src/operadores-combinacion/06-metodo-forkJoin.ts

@@ -0,0 +1,41 @@
+import { of, interval, forkJoin } from 'rxjs';
+import { delay, take } from 'rxjs/operators';
+
+const numeros$   = of(1,2,3,4);
+const intervalo$ = interval(1000).pipe(take(3));
+const letras$    = of('a','b','c').pipe(delay(3500));
+
+// forkJoin([
+//     numeros$,
+//     intervalo$,
+//     letras$
+// ]).subscribe(console.log);
+
+
+// Dificil de leer
+//
+// forkJoin([
+//     numeros$,
+//     intervalo$,
+//     letras$
+// ]).subscribe( resp => {
+//     console.log('numeros:', resp[0])
+//     console.log('intervalo:', resp[1])
+//     console.log('letras:', resp[2])
+// });
+
+// forkJoin({
+//     numeros$,
+//     intervalo$,
+//     letras$
+// }).subscribe( resp => {
+//     console.log(resp)
+// });
+
+forkJoin({
+    num: numeros$,
+    int: intervalo$,
+    let: letras$
+}).subscribe( resp => {
+    console.log(resp)
+});

src/operadores-combinacion/07-lab-forkJoin-peticiones.ts

@@ -0,0 +1,14 @@
+import { forkJoin, of } from 'rxjs';
+import { ajax } from 'rxjs/ajax';
+import { catchError } from 'rxjs/operators';
+
+const GITHUB_API_URL = 'https://api.github.com/users';
+const GITHUB_USER    = 'alesyt0h';
+
+forkJoin({
+    usuario: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}`),
+    repos: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/repo123123s`).pipe(catchError(err => of([]))),
+    gists: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/gists`),
+}).pipe(
+    catchError( err => of(err.message))
+).subscribe(console.log);