Fill dropdown information with ngrx-store / efffects

Question

I'm using angular 4 with ngrx-store and ngrx-effects. I have a simple form to load user information and got it working with effects that then dispatch a Load_User_success action to update the store.

I have a question. What is the best way the load the information to fill the dropdown lists that the form has and at the same time load the user information using ngrx ?

Answer 1

Create an observable in your component and set it equal to a select from the store.

users$ = store.select(state => state.users);

Add the below to component definition

@Component({changeDetection: ChangeDetectionStrategy.OnPush})

Then use an async pipe in your template to handle the subscription with something like:

 <div *ngIf="users$ | async">
 <select>
    <option *ngFor="user of (users$ | async)">{{user.name}}</option>
  </select>
  </div>