Skip to content

Instantly share code, notes, and snippets.

Avatar

Nya NyaGarcia

View GitHub Profile
View concatMap.ts
import { mergeAll, map, delay } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
import { of } from 'rxjs';
const pokemonId$ = of(1, 5, 6);
function getPokemonName(id: number) {
return ajax.getJSON(`https://pokeapi.co/api/v2/pokemon/${id}`).pipe(
map(({ name }) => name),
delay(2000)
@NyaGarcia
NyaGarcia / http-map-subscribe.ts
Created Jul 15, 2020
Nested subscribe to inner Observables
View http-map-subscribe.ts
import { map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
import { of } from 'rxjs';
const pokemonId$ = of(1, 5, 6);
function getPokemonName(id: number) {
return ajax.getJSON(`https://pokeapi.co/api/v2/pokemon/${id}`).pipe(
map(({ name }) => name));
}
@NyaGarcia
NyaGarcia / http-map.ts
Created Jul 15, 2020
Making several AJAX requests with map operator
View http-map.ts
import { map } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
import { of } from 'rxjs';
const pokemonId$ = of(1, 5, 6);
function getPokemonName(id: number) {
return ajax.getJSON(`https://pokeapi.co/api/v2/pokemon/${id}`);
}
View concatAll.ts
const pokemonId$ = of(1, 5, 6);
function getPokemonName(id: number) {
return ajax.getJSON(`https://pokeapi.co/api/v2/pokemon/${id}`).pipe(
map(({ name }) => name),
delay(2000)
);
}
// concatAll subscribes to each inner Observable only after the previous one has completed: it will wait until each request is done, before making a new one
@NyaGarcia
NyaGarcia / errorHandler.ts
Created Jun 25, 2020
Handlings errors with the Angular ErrorHandler class
View errorHandler.ts
class MyAwesomeErrorHandler implements ErrorHandler {
handleError(error) {
// Here we can implement our custom error handling logic
}
}
View try-catch.ts
function doSomething() {
throw new Error('Oh noez');
}
function doSomethingElse() {
console.log('Yay! Our code continues!');
}
try {
doSomething();
@NyaGarcia
NyaGarcia / observable-directive-example.ts
Created May 1, 2020
Usage example of the Observable directive
View observable-directive-example.ts
<p *observe="users$ as users; before loadingTemplate; error errorTemplate">
There are {{ users.length }} online.
</p>
<ng-template #loadingTemplate>
<p>Loading ...</p>
</ng-template>
<ng-template #errorTemplate let-error>
<p>{{ error }}</p>
</ng-template>
@NyaGarcia
NyaGarcia / observable-directive.ts
Created May 1, 2020
Creando una directiva personalizada para renderizar Observables en el template
View observable-directive.ts
import {
Directive, Input, TemplateRef, ViewContainerRef,
OnDestroy, OnInit, ChangeDetectorRef
} from '@angular/core'
import { Observable, Subject, AsyncSubject } from "rxjs";
import { takeUntil, concatMapTo } from "rxjs/operators";
export interface ObserveContext<T> {
$implicit: T;
observe: T;
}
@NyaGarcia
NyaGarcia / fromFetch-error.ts
Created Apr 24, 2020
Error handling with fromFetch()
View fromFetch-error.ts
const ghibliFilmError$ = fromFetch("https://ghibliapi.herokuapp.com/wrongURL").pipe(
switchMap(response => {
if (!response.ok) {
throw `There was an error with status ${response.status}`;
}
return response.json();
}),
catchError(err => {
console.error(err);
return of({ error: true, message: err });
@NyaGarcia
NyaGarcia / fromFetch-data.ts
Created Apr 24, 2020
Using switchMap to get fromFetch data
View fromFetch-data.ts
// If we just want the data, we can do something like this
ghibliFilmResponse$
.pipe(switchMap(response => response.json()))
.subscribe(console.log);
// [Object, Object, Object...]
You can’t perform that action at this time.