NGRX Entity: How to use it within template?


I followed a tutorial on how to implement an NGRX store with an NGRX entity.

Everything seems to work (as far as I can tell using the dev-tools-extension). However, I don’t know how I should/can iterate over the result in the template.

The template:


  <ng-container *ngIf="movies$">
        <tr *ngFor="let movie of (movies$ | async); let i = index">

The component:

  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.scss']
export class MoviesComponent implements OnInit {

  movies$: Observable<Dictionary<Movie>>;

  constructor(private store: Store<MovieState>) {;
    this.movies$ =

  ngOnInit(): void {


And for completeness, the reducer:

const {
} = fromReducer.adapter.getSelectors();

export const getMovieState = createFeatureSelector<fromReducer.State>(fromReducer.moviesFeatureKey);

export const selectMovieEntities = createSelector(getMovieState, selectEntities);

The Error-Message:
enter image description here

I’m wondering if I should "map" the result set first or what else is best practice here.

Hope for your help!


selectEntities returns the entities state as a dictionary (id is the key).
If you just want the entities (as an array), use the selectAll selector.

export const selectMovieEntities = createSelector(getMovieState, selectAll);

Answered By – timdeschryver

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.