hollygood

Use 'unsubscribe':

export class ExampleComponent implements OnInit, OnDestroy {
  exampleSubOne: Subscription;
  exampleSubTwo: Subscription;

  constructor(private exampleService: ExampleService) {}

  ngOnInit() {

hollygood

//========================================= dynamic-fields.service.ts

import { Injectable } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

/**
 * @description Dynamic fields service is used to generate reactive form group fields with Validators
 */
@Injectable({
    providedIn: 'root'

hollygood

/**
* @function forkJoin multiple requests with ngrx selects
* we can't use forkJoin for ngrx selects because this method requires the Observables being 'complete'
* in case of ngrx store, all of their observables are usually based on a BehaviorSubject, and will never complete
* the only way we can do is using like this: forkJoin(user$.take(1), customCarList$.take(1)
*/
const result$ = forkJoin([
  this.store.select(selectOne).pipe(take(1)),
  this.store.select(selectTwo).pipe(take(1)),
  this.store.select(selectThree).pipe(take(1))

hollygood

// In Angular 6, if you set 'disabled' reactive form field like following,
// you will get a warning message: It looks like you're using the disabled attribute with a reactive form directive.
// If you set disabled to true when you set up this control in your component class, the disabled attribute will 
// actually be set in the DOM for you. We recommend using this approach to avoid 'changed after checked' errors.

<input
    formControlName="userId"
    type="text"
    class="form-control m-input"
    required

hollygood

// before
function renderList(list, ordered, color, bgColor) {
    // set defaults for optional parameters
    if (typeof ordered === undefined) ordered = true
    if (typeof color === undefined) color = '#1e2a2d'
    if (typeof bgColor === undefined) color = 'transparent'

    /* code to render list would go here 😉 */
}

hollygood

// blogger.component.ts
...
  template: `
      <h1>Posts by: {{ blogger }}</h1>
      <div>
          <posts [data]="posts"></posts>
      </div>
  `
...

hollygood

@Effect({dispatch: false})
exampleFailure$: Observable<Action> = this.actions$.pipe(
  ofType(SOME_ACTIONS.CREATE_USER_FAILURE, SOME_ACTIONS.CREATE_POST_FAILURE),
  tap(action => {
    this.router.navigate(['/users'])
  })
);

hollygood

// One input, one output
@Effect()
firstAction$: Observable<Action> = this.action$.pipe(
  ofType<firstAction>('FIRST_ACTION'),
  mapTo(new SecondAction())
);

// Two inputs, one output
@Effect()
public dashboardLoadRequired$: Observable<Action> = 

hollygood

// ADD: Mutating
let mutatingAdd = ['a', 'b', 'c', 'd', 'e']; 

// array.push() adds an item to the end of the array
// array.unshift() adds an item to the beginning of the array.
mutatingAdd.push('f'); // ['a', 'b', 'c', 'd', 'e', 'f']  
mutatingAdd.unshift('z'); // ['z', 'a', 'b', 'c', 'd', 'e'

// ADD: NON MUTATING
// concat

hollygood

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