dmorosinotto

Comprehensive Introduction to @ngrx/store

By: @BTroncone

Also check out my lesson @ngrx/store in 10 minutes on egghead.io!

Update: Non-middleware examples have been updated to ngrx/store v2. More coming soon!

Table of Contents

dmorosinotto

#RxJS 5 Operators By Example

UPDATE: I have moved the contents of this gist plus more to https://github.com/btroncone/learn-rxjs and http://www.learnrxjs.io. For expanded examples, explanations, and resources, please check out this new location!

A complete list of RxJS 5 operators with easy to understand explanations and runnable examples.

Chinese Version by: @DrakeLeung

Table of Contents

• buffer

dmorosinotto

const log = (tag: string) => tap(
  next => console.log(`%c[${tag}: Next]`, 'color: #4CAF50;', next),
  error => console.log(`%c${tag}: Error]`, 'color: #F44336;', error),
  () => console.log(`%c[${tag}: Complete]`, 'color: #2196F3;')
);

dmorosinotto

//Helper function to handle async call (Observable generator with strategy + safe retry if error) to push value to Signal - useful for State Management with Signal
//READ MORE https://medium.com/@eugeniyoz/application-state-management-with-angular-signals-b9c8b3a3afd7
//ORIGINAL DOCS (NgRx component-store effect) https://ngrx.io/guide/component-store/effect#effect-method
import { isObservable, Observable, of, retry, Subject, Subscription } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DestroyRef, inject } from '@angular/core';

/**
 * This code is a copied `ComponentStore.effect()` method from NgRx and edited to:
 * 1) be a standalone function;

dmorosinotto

//ORIGINAL CODE BY @renatoaraujoc https://gist.github.com/renatoaraujoc/11fab34592fd81c75800aa2934faa913
export class EncryptionUtil {
    private static _textEncoder = new TextEncoder();
    private static _textDecoder = new TextDecoder();
    private static ENC_DEC_SIMPLE_CHARS =
        'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_';

    /**
     * Simple synchronous encryption using `XOR` algorithm, returning only allowed characters.
     * This method is fast but offers only low security. Supports UTF-8 characters.

dmorosinotto

import { Component, Input, ElementRef, Renderer2, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { RequestResponseAdapter } from '@gethuman/adapters';
import { config } from '@gethuman/config';
import { GhWebState } from '@gethuman/state';

@Component({
    selector: 'icon',
    standalone: true,
    template: ``, // no content for <icon></icon> since we are setting a mask-image