# State Actions

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

```typescript
// 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 s`tateIndex` will be `n` So final path inside of `todo.component` will look like `todos[stateIndex]`&#x20;

`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](https://vytautas.gitbook.io/ng-state/different-scenarious/passing-list-item-index-via-router)