Implementing Components

To demonstrate how to use the CounterService in your components, let's start by building out a small CounterComponent. The component will be responsible for incrementing and decrementing the counter by one, as well as allowing the user to reset the counter to zero.

app/components/counter.component.ts

import {Component, Input} from '@angular/core';
import {Observable} from 'rxjs/Observable';

import {CounterService} from '../services';
import {CounterActions} from '../store/counter/counter.actions';

@Component({
  selector: 'counter',
  templateUrl: './counter.component.html'
})
export class CounterComponent {

  private currentValue$: Observable<number>;

  constructor(
    counterService: CounterService,
    public actions: CounterActions
  ) {
    this.currentValue$ = counterService.getCurrentValue();
  }

}

app/components/counter.component.html

<p>
  Clicked: {{currentValue$ | async}} times
  <button (click)="actions.increment()">+</button>
  <button (click)="actions.decrement()">-</button>
  <button (click)="actions.reset()">Reset</button>
</p>

The template syntax should be familiar by now, displaying an Observable counter value with the async pipe. Any time appState.counter.currentValue is updated by a reducer, currentValue$ will receive the new value and | async will update it in the template.

The component also handles some click events. Each click event is bound to expressions that call our action creators from the CounterActions ActionCreatorService.