dpalita

i18n.ActivityStatus={value, select, other {unknown}\
  COMPLETED {Completed}\
  DUE_TODAY {Due today}\
  OVERDUE {Overdue}\
  PENDING {Pending}\
}

# Usage : {{'i18n.ActivityStatus' | translate:{value: activity.status} }}

dpalita

export const ACCOUNT_REDUCER_TOKEN = new InjectionToken<ActionReducer<Map<string, Account>>>('Account state reducer')

export function accountReducerFactory(accountReducer: AccountReducer): ActionReducer<Map<string, Account>> {
  // here you create a reducer function with access to other managed services
  return accountReducer.createReducer()
}

@NgModule({
  imports: [
    StoreModule.forFeature('account', ACCOUNT_REDUCER_TOKEN)

dpalita

@Injectable()
export class AccountReducer {
  // with real DI inside
  constructor (private usefulService: UsefulService) {}

  createReducer() {
    // handle specific action with the help of your injected service and return new states, this is the pure reducer function
    return (state: AccountState, action: Action) => {
      if(action.type === 'SomethingUseful' /* or better still action instanceof SomethingUsefulAction, but this makes for another post ;-)*/) {
        return {...state, {useful: this.usefulService.something(action.payload)}}

dpalita

@Injectable()
export class AccountReducer extends EntityReducer<Account> {
  private initialState: AccountState
  
  createReducer() {
    return (state: AccountState, action: Action) => {
      if (action instanceof AppInitAction && state === undefined) {
        return initialState
      } else {
        ...

dpalita

@NgModule({
...
})
export class AppModule {
  constructor(applicationInitStatus: ApplicationInitStatus,
              store: Store<AppState>) {
    // dispatch the app init action when all stores have add a chance to rehydrate from indexedDb
    applicationInitStatus.donePromise.then(() => store.dispatch(new AppInitAction()))
  }
}

dpalita

@Injectable()
export class AccountReducer {
  private initialState: AccountState
...
  bootstrap(): Promise<AccountState> {
    return new Promise(resolve =>
      // rehydrate uses indexedDb to read the state
      this.rehydrate(this.storage).subscribe(initialState => {
        this.initialState = initialState
        resolve()

dpalita

@Injectable()
export class AccountReducer {
  private initialState: AccountState
...
  bootstrap(): Promise<AccountState> {
    return new Promise(resolve =>
      // rehydrate uses indexedDb to read the state
      this.rehydrate(this.storage).subscribe(initialState => {
        this.initialState = initialState
        resolve()

dpalita

export function accountReducerBootstrapFactory(reducer: AccountReducer) {
  // bootstrap() returns a Promise
  return () => reducer.bootstrap()
}

@NgModule({
...
  providers: [
    {
      provide: APP_INITIALIZER,

dpalita

function handleNotifications () {
   const notifications = getNotifications() // as Notification[]
   log(notifications)
   displayNotificationCounter(notifications.length)
   updateNotificationPanel(notifications)
   ...
}
// vs différents blocs indépendants du moment que l'observable de notifications est accessible
const notifications$ = getNotifications() // as Observable<Notification[]>
notifications$.subscribe(notifs => log(notifs))

dpalita

const bitcoinQuotePromise = fetchQuoteAsPromise('btc') // la requête est émise ici
bitcoinQuotePromise.then(news => buy())
bitcoinQuotePromise.then(news => tweet())
// une seule requête http a été émise

const bitcoinQuoteObservable = fetchQuoteAsObservable('btc') // rien
bitcoinQuoteObservable.subscribe(news => buy()) // la requête est émise ici
bitcoinQuoteObservable.subscribe(news => tweet()) // une autre requête est émise ici
// deux requêtes ont été émises