splincode

Angular

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

@Component({
  selector: 'my-app',
  template: `
    <h1>{{ msg }}</h1>
    <h3>{{ reverseMsg() }}</h3>

splincode

@State<string[]>({
    name: 'animals',
    defaults: []
})
export class AnimalsState {
    @Receiver()
    public static addAnimal(ctx: StateContext<string[]>, action: EmitterAction<string>) {
        ctx.setState((state) => [ ...state, action.payload ]);
    }
}

splincode

@State<number>({
    name: 'counter',
    defaults: 0
})
export class CounterState {
    @Action(Increment)
    public increment({ setState }: StateContext<number>) {
        setState((state) => state++);
    }
}

splincode

@Component({
    selector: 'app-root',
    template: `
        <ng-container *ngIf="counter$ | async as counter">
            <h1>{{ counter }}</h1>
        </ng-container>
​
        <button (click)="increment()">Increment</button>
    `
})

splincode

@Component({
    selector: 'app-animal',
    template: `
        <ng-container *ngFor="let animals of animals$ | async">
            <p>{{ animal }}</p>
        </ng-container>

        <input #inputAnimal placeholder='Add new animal' />

        <button (click)="addAnimal.emit(inputAnimal.value)">

splincode

import { NgxsModule } from '@ngxs/store';
import { NgxsDispatchPluginModule } from '@ngxs-labs/dispatch-decorator';
...

@NgModule({
  imports: [
    NgxsModule.forRoot([ ... ]),
    NgxsDispatchPluginModule.forRoot()
  ],
  ...

splincode

export class Increment {
  static readonly type = '[Increment]: description';
}

@State<number>({
  name: 'count',
  defaults: 0
})
export class CountState {
  @Action(Increment)

splincode

import { Dispatch } from '@ngxs-labs/dispatch-decorator';
import { CounterState, Increment } from './counter.state';
...

@Component({
  selector: 'my-app',
  template: `
    <h1>Count is {{ counter$ | async }}<h1>
    <button (click)="increment()">increment</button>
  `

splincode

import { Dispatch } from '@ngxs-labs/dispatch-decorator';
...

@Component({
  selector: 'my-app',
  template: `
    {{ stateA$ | async }}
    {{ stateB$ | async }}
    {{ stateC$ | async }}
    ...

splincode

import { Component } from '@angular/core';
import { HeroesService } from './store/heroes/heroes.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html' 
})
export class AppComponent  {
  constructor(public heroes: HeroesService) { }
}