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.