Show List of Ski Resorts

Simple Store

Resort Listing

Let's update our application to list all of the ski resorts.

Update AppComponent

Open src/app/app.component.ts.

First, create a new resorts property to contain the array of Resort objects that we'll obtain from the state object:

resorts: Resort[];

Next, update the ngOnInit lifecycle method:

ngOnInit() { = store; LoadResorts()); => {
    this.resorts = state.resort.resorts;
    this.sidenavHidden = state.sidenav.hidden;
  • First, dispatch() the LoadResorts action.
  • Then, set the resorts property from the state object.

Finally, let's create an identifyResort method that can be used as the tracking function for the NgForOf directive:

identifyResort(resort: Resort) {

Update Template

Open src/app/app.component.html and add an unordered list to display the ski resorts with a link to their website:

<ul *ngFor="let resort of this.resorts; trackBy: identifyResort">
    <a [attr.href]="resort.url" target="_blank">{{}}</a>


Go ahead and serve the project:

npm run start:simple-store
yarn run start:simple-store

Inspect the console for state changes as the resorts are loaded as well as inspect the GET network request to load the resorts from the REST API.


Site © by LiveLoveApp, LLC

We Can Help!

Need help with your Angular and NgRx project?

Hire Us