RxJs simple example with array

by black strings

HTML

<script src="https://unpkg.com/[email protected]/dist/bundles/rxjs.umd.js"></script>
<div id="helperWindow">
  <ul>
    <li>Uncomment functions in index.ts to trigger them</li>
    <li>Best to only enable one at a time</li>
    <li>rely on the console for outputs</li>
  </ul>
  <button id="okayBtn">I Got it</button>
</div>

<div id="helpBtn">
  help
</div>

<!-- <button id="btn">test button</button> -->
<div id="mainlog" ></div>

<script src="https://unpkg.com/[email protected]/dist/bundles/rxjs.umd.js"></script>

CSS

body {
  font-family: monospace;
  background-color:#000000;
  color:grey;
  font-size:16px;
}

#helperWindow {
  padding: 2em;
  padding-top: 0;
  background-color: white;
  position: absolute;
  top: 0;
  left: 0;
  object-position: bottom;
  transition: top 500ms;
}
#helperWindow ul {
  padding-left: 0;
  margin-left: 0;
}

#helperWindow button {
  color: white;
  width: 100%;
  border: thin solid rgb(82, 82, 82);
  border-radius: 10px;
  background-color: rgb(80, 190, 253);
  padding: .5em;
  cursor: pointer;
}

#helperWindow button:hover {
  background-color: rgb(116, 202, 252);
}

/* move the window all the way up to hide */
#helperWindow.hide {
  top: -100%;
}

#helpBtn {
  border: thin solid rgb(87, 87, 87);
  position: absolute;
  right: 0;
  background-color: white;
  padding: .3em;
  cursor: pointer;
  user-select: none;
}
#helpBtn:hover {
  background-color: rgb(185, 229, 255);
}

TypeScript

import {
  Observable,
  from,
  of,
  interval,
  range,
  Subject,
  BehaviorSubject,
  ReplaySubject,
  fromEvent,
  timer,
  concat,
  merge,
  throwError,
  forkJoin,
  asyncScheduler,
  asapScheduler,
  Scheduler,
  scheduled,
  queueScheduler,
  combineLatest,
  zip
} from 'rxjs';
import { ajax, fromPromise } from 'rxjs/internal-compatibility';
import {
  concatAll,
  take,
  takeWhile,
  map,
  first,
  filter,
  takeUntil,
  last,
  timeout,
  scan,
  throttleTime,
  flatMap,
  delay,
  mapTo,
  mergeAll,
  mergeMap,
  exhaustMap,
  concatMap,
  catchError,
  switchMap,
  debounceTime,
  tap,
  startWith,
  retryWhen,
  delayWhen,
  share,
  multicast
} from 'rxjs/operators';
//import './style.css';
// observables
// they are cold functions, and unicast whereas subjects can do multicast
// observables are like functions, except they can do more
// obs can return multiple values both synchronously or async
// which a function can only return one value
// observables are lazy loaded, it only fires when there is a subscriber
// such as creating the observable and subscribing to it

// note: the subscriber function is passed in when creating the observable
// however, most observables are created through creational functions, like of, from, interval, ... etc

// Handling leak memory
// make sure to unsubscribe from observables that keeps a stream alive
// either manually unsubscribe, or use operators to avoid manual unsubscribing

// use delay to wait for a certain milesec before firing

/**
cheat-sheet recap
- when grouping observables

concat | concatAll | concatMap
- order of obs completion matters and all obs must complete
- value emits as obs completes
- all values emitted are not all available under the same scope
- values are emitted in the order their obs are listed
- all obs must complete
- one obs waits until the previous is completed before the next obs can go, and repeats until all obs are completed
- each value emitted from an obs is handled in...