State 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
Last updated
Was this helpful?