Creating a Declarative Modal

Deciding What to Build First

When I am building an application I try to first focus on getting straight to the thing that my application, or the feature I am working on, “does”. We are going to want to save the data in our application at some point, but that is not what the application is all about. We could start there, but it’s not the best starting point.

The application is about creating and managing checklists, so as a starting point, it makes sense to focus on being able to create a checklist. But how do we get there? It can be intimidating to take in everything all at once, so just focus on whatever the next step is.

If we want to be able to create a checklist, then there is going to need to be some kind of user interface for the user to do that. What will that look like in our application? Well, in this case, we are going to have some kind of add button the user will click when they want to add a new checklist. Let’s focus on that first.

Create the add checklist button

Action

Add the following to the HomeComponent:

import { Component } from '@angular/core';
import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonTitle,
  IonToolbar,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { add } from 'ionicons/icons';

@Component({
  selector: 'app-home',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Quicklists</ion-title>
        <ion-buttons slot="end">
          <ion-button>
            <ion-icon name="add" slot="icon-only" />
          </ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>

    <ion-content></ion-content>
  `,
  imports: [
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButtons,
    IonButton,
    IonIcon,
  ],
})
export default class HomeComponent {
  constructor() {
    addIcons({ add });
  }
}

This is the first time we have used an ion-icon. Ionic provides a great set of icons we can use by default, you can find them here.

To use any of the icons, we first need to import it along with the addIcons utility:

import { addIcons } from 'ionicons';
import { add } from 'ionicons/icons';

We can then call the addIcons function with the icon in the constructor:

  constructor() {
    addIcons({ add });
  }

Then we can import the IonIcon standalone componenent, like any other standalone component, and use it like this in the template by referencing the icons name:

<ion-icon name="add" slot="icon-only" />

Note

The use of the icon-only slot here effects the styling, and is intended for situations where the icon will be displayed by itself, not alongside text.

Now we have a button, which currently does nothing. You can go ahead and check for yourself if you like by running:

ionic serve

It is a good idea to have this running in the background whilst you are developing your application. The earlier you catch an error the easier it will be to solve. You don’t want to add hundreds of lines of code before you check that your application actually works.

Doing this as a first step might seem a little silly — but it is highly effective especially if you do feel a bit overwhelmed in trying to figure out what to do next.

Create the Checklist interface

Before we continue, it will be useful for us to define the basic structure of what our checklists will look like:

Action