counter.component.ts

import { Component } from '@angular/core';
import { Select } from '@ngxs/store';
import { Emitter, Emittable } from '@ngxs-labs/emitter';

import { CounterState } from './counter.state';

@Component({
    selector: 'app-counter',
    template: `
        <ng-container *ngIf="counter$ | async as counter">
            <h3>Counter is {{ counter.value }}</h3>
            <div>
                <button (click)="increment.emit()">Increment</button>
                <button (click)="decrement.emit()">Decrement</button>
            </div>
        </ng-container>
    `
})
export class CounterComponent {
    @Select(CounterState)
    public counter$: Observable<number>;
    
    @Emitter(CounterState.increment)
    public increment: Emittable<void>;
        
    @Emitter(CounterState.decrement)
    public decrement: Emittable<void>;
}