fxck

export class UserListRequest implements Action, LoadingAction {
  readonly type = ActiontTypes.UserListRequest;
  fxLoading = { add: ActiontTypes.UserListRequest };
}

fxck

export class UserListRequest implements Action {
  readonly type = ActiontTypes.UserListRequest;
}

fxck

@Injectable()
export class UsersEffects {
  @Effect()
  private _onListRequest$ = this._actions$.pipe(
    ofType('USER_LIST_REQUEST'),
    map((action) => new LoadingAdd(action.type))
  );

  constructor(private _actions$: Actions) { }
}

fxck

export function reducer(
  state = initialState,
  action: Actions
) {
  switch (action.type) {
    case ActionTypes.Add:
      return { data: [ ...state.data, action.payload ] };
    case ActionTypes.Remove:
      return { data: state.data.filter((id) => id !== action.payload) };
  }

fxck

export enum ActionTypes {
  Add = '[@my/loading] Add',
  Remove = '[@my/loading] Remove'
}

export class Add {
  readonly type = ActionTypes.Add;
  constructor(public payload: string) { }
}

fxck

class State {
  data: string[];
} 

fxck

class Users {
  list[]: string;
  loading: boolean;
  
  constructor() {
    this.list = [];
    this.loading = false;
  }
}
  

fxck

<div style="padding: 7px">
  
  <foo-cmp>
    
    <md-input-container>
      <input mdInput placeholder="Whatever" type="text" [formControl]="form.get('whatever')">
    </md-input-container>
    
    <md-input-container>
      <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="form.get('state')">

fxck

<div style="padding: 7px">
  <button md-raised-button (click)="open = true">Open Dialog</button>
  
  <dialog-cmp [open]="open">
    
    <md-input-container>
      <input mdInput placeholder="Whatever" [formControl]="form.get('whatever')">
    </md-input-container>
  
    <md-input-container>

fxck

<div style="padding: 7px">
  
  <sub-component 
    [options]="options$ | async" 
    [param]="routeParam$ | async">
  </sub-component>


  <sub-component 
    [options]="options$ | async"