obaranovskyi

import { from } from 'rxjs';

function getRandomInt(max: number): number {
  return Math.floor(Math.random() * max);
}

const fromPromise$ = from(
  new Promise((resolve, reject) => {
    console.log('Promise will be invoked only once, right away, and with the same value.');
    resolve(getRandomInt(100));

obaranovskyi

import { defer } from 'rxjs';

function getRandomInt(max: number): number {
  return Math.floor(Math.random() * max);
}

const fromPromise$ = defer(() =>
  new Promise((resolve, reject) => {
    console.log('Promise will run multiple times, and produce different values.')
    resolve(getRandomInt(100));

obaranovskyi

import { Observable } from 'rxjs';

function getRandomInt(max: number): number {
  return Math.floor(Math.random() * max);
}

const randomInt = getRandomInt(100);
const obs = new Observable(subscriber => {
  subscriber.next(randomInt);
  subscriber.complete();

obaranovskyi

import { Observable } from 'rxjs';

function getRandomInt(max: number): number {
  return Math.floor(Math.random() * max);
}

const obs = new Observable(subscriber => {
  const randomInt = getRandomInt(100);
  subscriber.next(randomInt);
  subscriber.complete();

obaranovskyi

import { of } from 'rxjs';
import { fromFetch } from 'rxjs/fetch';
import { switchMap, catchError } from 'rxjs/operators';

const toError = (message: string) => of({ error: true, message });

const data$ = fromFetch('https://api.github.com/users?per_page=1')
  .pipe(
    switchMap((response: Response) => {
      return response.ok

obaranovskyi

console.log('--- Start ---');

Promise.resolve('Promise').then(console.log)

console.log('--- End ---');

obaranovskyi

import { interval } from 'rxjs';
import { take } from 'rxjs/operators';

console.log('--- Start ---');

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

obs.subscribe(console.log);

console.log('--- End ---');

obaranovskyi

import { range } from 'rxjs';

console.log('--- Start ---');

const obs = range(0, 5);

obs.subscribe(console.log);

console.log('--- End ---');

obaranovskyi

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

import { UserService } from '../user.service';
import { UserModel } from '../user.model';

@Component({
  selector: 'app-user-details',

obaranovskyi

<div class="main-container">
  <a routerLink="/">Home</a>
  <br>

  <ng-container *ngIf="(userService.userId$ | async) == user?.id; else loading">
    <div class="card">
      <div>id: {{ user.id }}</div>
      <div>first_name: {{ user.first_name }}</div>
      <div>email: {{ user.email }}</div>
    </div>