User Experience Refinements

At this point, we’ve basically finished the core functionality of the application. But… it isn’t the most user friendly or good looking application yet. This lesson is going to focus on a few user experience improvements, and then the following lesson will focus on some styling. These little extra details are really what make the difference between a great application and the rest.

These are all mostly just little odds and ends - if you have made it this far then these likely aren’t going to present much of a challenge, it’s just something we need to get done.

Displaying a message when no checklists are available

When a user first starts using the application, or just creates their first checklist and views its details, they are going to be staring at an empty page. We can add a check for when there are no checklists/items and we can display a helpful message instead.

Update the template of the ChecklistListComponent to include the following (just before </ion-list>):

      <ion-card *ngIf="checklists.length === 0">
        <ion-card-header>
          <h2>Welcome!</h2>
        </ion-card-header>
        <ion-card-content>
          <p>Click the add button to create your first quicklist</p>
        </ion-card-content>
      </ion-card>

Update the template of the ChecklistItemListComponent to include the following (just before </ion-list>):

      <ion-card *ngIf="checklistItems.length === 0">
        <ion-card-header>
          <h2>Add an item</h2>
        </ion-card-header>
        <ion-card-content>
          <p>Click the add button to add your first item to this quicklist</p>
        </ion-card-content>
      </ion-card>

Add presenting element for modals

This is mostly just a stylistic change but it does require some code changes. By setting a presenting element, we can get cooler mobile looking popups for our modals (you will see what I mean if you enable the device emulator in Chrome DevTools and set it to simulate a mobile device).

I will leave this one up to you a little bit.

Inject IonRouterOutlet as routerOutlet in both the HomeComponent and ChecklistComponent

NOTE: You will have to set routerOutlet to be public not private in order to be able to access it in the template

Add the following binding to the ion-modal in both components:

[presentingElement]="routerOutlet.nativeEl"

Scroll to bottom when checklists change

This one isn’t really a problem initially, but if you create enough checklists or items to fill the entire page, when you add a new one you won’t see it (because it will be off the bottom of the page). We are going to add some code so that when a new checklist or item is added, we automatically scroll to the bottom of the page.

In both the HomeComponent and the ChecklistComponent grab a reference to the ion-content component using @ViewChild:

@ViewChild(IonContent) ionContent!: IonContent;