Components with Actions

Next we need to tell component that it will use TodoActions . We are doing this by decorating component with @ComponentState decorator

todos.component.ts

import { ChangeDetectionStrategy, Component, ChangeDetectorRef } from '@angular/core';

import { ComponentState, HasStateActions } from 'ng-state';
import { TodoModel } from './../actions/todo.model';
import { TodosStateActions } from './../actions/todos.actions';

@ComponentState(TodosStateActions)
@Component({
  selector: 'todos',
  templateUrl: './todos.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TodosComponent extends HasStateActions<TodosStateActions> {
  constructor(cd: ChangeDetectorRef) {
    super(cd);
  }
}

In this step three properties will be available from base class

• statePath - current state path that component is manipulating with

• actions - previously created actions class

• stateIndex - index item of the state if state is an array.

For example if we are using *ngFor directive and repeating todo.component we need to pass not only statePath but stateIndex as well because statePath is todos and stateIndex will be n So final path inside of todo.component will look like todos[stateIndex]

stateIndex can also be set for in cases like when you want to pass item index via URL and want to load state according to it. More documentation on section: Passing list item index via router