How to use ng2-redux - 10 common examples

import { Observable } from 'rxjs/Observable';

declare let TweenMax: any;
declare let TimelineMax: any;

@Component({
  selector: 'nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.css']
})

export class NavBarComponent implements AfterViewInit { 

	@ViewChild('menu') m: ElementRef;

  	@select('user') user$: Observable;
	@select('timeOfDay') toda$: Observable;
	menuHide: boolean = false;
	menuOpen: boolean = false;

	linkWidth: number;
	sioWidth: number;
	savedWidth: number;

	private timeline: any;

	constructor(private el: ElementRef) {}

	ngAfterViewInit() {
		// this.linkWidth = this.m.nativeElement.children[0].clientWidth;
		// this.sioWidth = this.m.nativeElement.children[1].clientWidth;
		// this.checkMenuWidth();

import { Component, AfterViewInit, HostListener, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';
import { TimeOfDayActions } from '../../../main-segment/actions/time-of-day/time-of-day.actions';

@Component({
  selector: 'the-sky',
  templateUrl: './sky.component.html',
  styleUrls: ['./sky.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class SkyComponent implements AfterViewInit {
  //using the select decorator to retrieve the timeOfDay object from the redux store. Then assigning it to variable toda$ in the component for use
  @select('timeOfDay') toda$: Observable;
  //The values for the time
  currMinutes: number;
  currHours: number;
  //the position of the sun, we use translate in order to avoid DOM painting
  yPos: string = 'translateY(10px)';
  private windowHeight: number = window.innerHeight;  
  //DI for the toda action to subscribe to the date object, and ref for activating change detection in the subscriptions.
  constructor(public toda: TimeOfDayActions, private ref: ChangeDetectorRef) { }

  ngAfterViewInit() {

    // Set the height of the sun and moon whenever the time changes
    this.toda.getCurrentTime().subscribe(x => {

      if ((x.getHours() >= 6 && x.getHours() < 12) || (x.getHours() >= 18 && x.getHours() < 24) && (x.getMinutes() !== this.currMinutes)) {
        this.currMinutes = x.getMinutes();

StringJS('a').capitalize()
    this.store.dispatch({type: '111', payload: 111})
    this.store.dispatch(this.act('333'));
    this.appStore.dispatch({type: '3332'})
    this.store.dispatch(this.action.serverStatus()); // no need for  in "ng2-redux": "^4.2.0-thunkexp.0",
    console.log('>>> offline: ' + this.offlineEnv + ' ' + this._obs$);
  }

  @select(state => state.notify)
  set setCounter(obs$) {
    this._obs$ = obs$;
    this._obs$.map(e => e);
  }

  @select('notify') obs$

  private selectedReportNameLong:string = 'hello-world-humanize-me';
  public stringJSPipeArgs = {
    humanize: []
  }

  private _obs$;

  private act = (i_value): any => {
    return (dispatch) => {
      setTimeout(() => {
        dispatch({type: '555', payload: i_value})
      }, 500)
    }
  }
}

console.log(StringJS('/a/a/a/a/a').fileTailName(3).s);
    // console.log(Ngmslib.testAAA('coss22olness....'));

    this.cancelOnDestroy(this.appStore.sub((value) => {
      console.log('ABC D' + value);
    }, 'sample_reducer'))

    StringJS('a').capitalize()
    this.store.dispatch({type: '111', payload: 111})
    this.store.dispatch(this.act('333'));
    this.appStore.dispatch({type: '3332'})
    this.store.dispatch(this.action.serverStatus()); // no need for  in "ng2-redux": "^4.2.0-thunkexp.0",
    console.log('>>> offline: ' + this.offlineEnv + ' ' + this._obs$);
  }

  @select(state => state.notify)
  set setCounter(obs$) {
    this._obs$ = obs$;
    this._obs$.map(e => e);
  }

  @select('notify') obs$

  private selectedReportNameLong:string = 'hello-world-humanize-me';
  public stringJSPipeArgs = {
    humanize: []
  }

  private _obs$;

  private act = (i_value): any => {
    return (dispatch) => {

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { select } from 'ng2-redux';

import { UserActions }  from '../../../main-segment/actions/user/user.actions';
import { UserFormActions } from '../../../main-segment/actions/userForm/userForm.actions';
import { ErrorHandlerActions } from '../../../main-segment/actions/error/errorHandler.actions';

@Component({
  selector: 'sign-in-out',
  templateUrl: './sign-in-out.component.html',
  styleUrls: ['./sign-in-out.component.css']
})
export class SignInOutComponent implements OnInit {
  @select('user') user$: Observable;
  @select('userForm') userForm$: Observable;

  constructor(
    private userActions: UserActions,
    private userFormActions: UserFormActions,
    private errorHandler: ErrorHandlerActions) { }

  ngOnInit() {
    this.userActions.getMe();
  }
}

import { Observable } from 'rxjs/Observable';

import { select } from 'ng2-redux';

import { UserActions }  from '../../../main-segment/actions/user/user.actions';
import { UserFormActions } from '../../../main-segment/actions/userForm/userForm.actions';
import { ErrorHandlerActions } from '../../../main-segment/actions/error/errorHandler.actions';

@Component({
  selector: 'sign-in-out',
  templateUrl: './sign-in-out.component.html',
  styleUrls: ['./sign-in-out.component.css']
})
export class SignInOutComponent implements OnInit {
  @select('user') user$: Observable;
  @select('userForm') userForm$: Observable;

  constructor(
    private userActions: UserActions,
    private userFormActions: UserFormActions,
    private errorHandler: ErrorHandlerActions) { }

  ngOnInit() {
    this.userActions.getMe();
  }
}

import { Component, ChangeDetectionStrategy } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class UserProfileComponent {

  @select('user') user$: Observable;

}

import { Component, ChangeDetectionStrategy } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'the-ocean',
  templateUrl: './ocean.component.html',
  styleUrls: ['./ocean.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class OceanComponent{ 
	//this ng2-redux store item is used in the html template with the async pipe
	@select('timeOfDay') toda$: Observable;

}

import{ Component, ChangeDetectionStrategy } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'blue-whale',
  templateUrl: './whale.component.html',
  styleUrls: ['./whale.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class WhaleComponent { 

  @select('timeOfDay') toda$: Observable;

  getStarted() {
  	window.location.href = "https://github.com/projectSHAI/GOAT-stack";
  }

}

import { Component, ChangeDetectionStrategy } from '@angular/core';

import { select } from 'ng2-redux';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'mountain-goat',
  templateUrl: './mountain-goat.component.html',
  styleUrls: ['./mountain-goat.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class MountainGoatComponent {

  @select('timeOfDay') toda$: Observable;

}