Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Andy andrewtw

🎯
Focusing
View GitHub Profile
@andrewtw
andrewtw / ngrx-example-module.ts
Last active May 5, 2020
NGRX Tutorial - Module
View ngrx-example-module.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { reducers } from '(team main reducer -> the index.ts)';
@andrewtw
andrewtw / ngrx-example-routes.ts
Last active Jun 11, 2018
NGRX Tutorial - Routes
View ngrx-example-routes.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Routes } from '@angular/router';
import { AuthGuard } from '(auth guard path)';
export const routes: Routes = [
{
path: 'team',
loadChildren: '(Team App module)',
@andrewtw
andrewtw / ngrx-example-auth-guard.ts
Last active May 29, 2020
NGRX Tutorial - Auth Guard
View ngrx-example-auth-guard.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { map, take } from 'rxjs/operators';
import * as Auth from '(auth actions)';
import * as fromTeam from '(team main reducer)';
@andrewtw
andrewtw / ngrx-example-auth-component.ts
Last active Jun 11, 2018
NGRX Tutorial - Auth Component
View ngrx-example-auth-component.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Component, OnInit } from '@angular/core';
import { Authentication } from '(authentication model)';
import * as fromTeam from '(team main reducers)';
import * as Auth from '(auth actions)';
import { Store, select } from '@ngrx/store';
@andrewtw
andrewtw / ngrx-example-auth-services.ts
Last active Jun 11, 2018
NGRX Tutorial - Auth Service
View ngrx-example-auth-services.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Injectable } from '@angular/core';
import { of, Observable, throwError } from 'rxjs';
import { Authentication } from '(authentication model)';
@Injectable()
export class AuthService {
constructor() {}
@andrewtw
andrewtw / ngrx-example-auth-effects.ts
Last active Jun 11, 2018
NGRX Tutorial - Auth Effect
View ngrx-example-auth-effects.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Injectable } from '@angular/core';
import { Effect, Actions, ofType } from '@ngrx/effects';
import { tap, map, exhaustMap, catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { of } from 'rxjs';
import { AuthService } from '(service path to request backend data)';
import { Permission } from '(service path to request backend data)';
@andrewtw
andrewtw / ngrx-example-index-reducer.ts
Last active Jun 11, 2018
NGRX Tutorial - Index Reducer
View ngrx-example-index-reducer.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import {
createSelector,
createFeatureSelector,
ActionReducerMap,
} from '@ngrx/store';
@andrewtw
andrewtw / ngrx-example-auth-reducer.ts
Last active Jun 11, 2018
NGRX Tutorial - Auth Reducers
View ngrx-example-auth-reducer.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { ActionReducer, Action } from '@ngrx/store';
import * as auth from '(auth action path)';
// Here is the final state required by the app
export interface State {
isAuthenticated: boolean;
// Name is what we passed in "Actions" as payload, thus it can be a model if needed
@andrewtw
andrewtw / ngrx-example-authentication-model.ts
Last active Jun 11, 2018
NGRX Tutorial - Authentication Model
View ngrx-example-authentication-model.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
export interface Authentication {
identifier: string;
password: string;
}
@andrewtw
andrewtw / ngrx-example-auth-actions.ts
Last active Mar 1, 2019
NGRX Tutorial - Auth actions
View ngrx-example-auth-actions.ts
// NGRX Complete Tutorial Without Pain (Angular6 / RxJS6)
// https://medium.com/@andrew.kao/ngrx-complete-tutorial-without-pain-angular6-rxjs6-5511b8cb8dac
import { Action } from '@ngrx/store';
// Use 'enum' to be registered as a map later
export enum AuthActionTypes {
Login = '[Auth] Login',
Success = '[Auth] Success',
Failed = '[Auth] Failed',
You can’t perform that action at this time.