NGXS Data example.

child.component.html

<div class="wrapper">
  <div class="title">
    Child 👦
  </div>
  <div class="content">
    <div class="action">
      <button (click)="counter.updateValue2(-1)">-1</button>
      <span class="value"> {{ counter.snapshot.value2 }}</span>
      <button (click)="counter.updateValue2(1)">+1</button>
    </div>
  </div>
    <app-little-child></app-little-child>
</div>

child.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CounterDataState } from '../state/counter.state';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ChildComponent {
  constructor(public counter: CounterDataState) {}
}

counter.state.ts

import { Injectable } from '@angular/core';
import { Computed, DataAction, Payload, StateRepository } from '@ngxs-labs/data/decorators';
import { NgxsDataRepository } from '@ngxs-labs/data/repositories';
import { State } from '@ngxs/store';

export interface Counter {
  value1: number;
  value2: number;
  value3: number;
}

const initialState: Counter = { value1: 0, value2: 0, value3: 0 };

@StateRepository()
@State<Counter>({
  name: 'counterData',
  defaults: initialState,
})
@Injectable()
export class CounterDataState extends NgxsDataRepository<Counter> {
  @DataAction()
  public updateValue1(@Payload('value1') value1): void {
    this.ctx.setState((state) => ({ ...state, value1: state.value1 + value1 }));
  }

  @DataAction()
  public updateValue2(@Payload('value2') value2: number): void {
    this.ctx.setState((state) => ({ ...state, value2: state.value2 + value2 }));
  }

  @DataAction()
  public updateValue3(@Payload('value3') value3: number): void {
    this.ctx.setState((state) => ({ ...state, value3: state.value3 + value3 }));
  }

  @Computed()
  public get sum(): number {
    return this.snapshot.value1 + this.snapshot.value2 + this.snapshot.value3;
  }
}