btroncone

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

btroncone

RxJS 5 Operators By Example

⚠️ UPDATE: I have moved the contents of this gist plus more to http://www.learnrxjs.io and https://github.com/btroncone/learn-rxjs. 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.

Table of Contents

• buffer
• bufferCount
• bufferTime

btroncone

Which do you prefer?

Adding to common sub, calling subscription.unsubscribe() in ngOnDestroy:

export class MyComponent {
  private _subscription: Subscription;
  
  ngOnInit() {
    this._subscription = myObservable

btroncone

import { Injectable } from 'angular2/core';
import { Storage } from './storage';
import { CurrentUser } from '../interfaces/common';

@Injectable()
export class Authentication{
    private _storageService : Storage;
    private _userKey : string = "CURRENT_USER";

    constructor(storageService : Storage){

btroncone

angular 2 basic counter

Basic counter in Angular 2.

btroncone

//specify what state slices you would like to keep synced with local storage
export function main() {
  return bootstrap(TodoApp, [
      provideStore(APP_REDUCERS),
      localStorageMiddleware('todos', 'visibilityFilter')
  ])
  .catch(err => console.error(err));
}

btroncone

@ngrx/store counter

Basic counter w/ @ngrx/store.

btroncone

import { inject, TestBed } from '@angular/core/testing';
import { of } from 'rxjs/observable/of';
import { LoggingService, LocalStorageService } from '../';
import { RouterEventService } from '../../routing';

export class MockLocalStorageService {
    setItem() {}
    getItem() { return []; }
}
export class MockRouterEventService {

btroncone

import {Component, Input, Output, EventEmitter} from "angular2/core";
import {Todo} from "../services/Todo-Service";

@Component({
    selector: 'todo-item',
    styles: [
        `
        .complete{
            text-decoration: line-through;
        }