Adding Some Simple Styling

Adding Some Simple Styling

Our application does everything it is supposed to do now for this simple example, but we have put no thought into the style or design and it looks terrible. We aren’t going to go all out here, but a few simple tweaks are going to make this application look a whole lot better.

We are primarily going to do two things:

• Make more use of Ionic’s components
• Add in a few minor style tweaks

Action

Give the ion-toolbar a primary color:

    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Todo</ion-title>
      </ion-toolbar>
    </ion-header>

Action

Modify the TodoFormComponent to reflect the following:

@Component({
  selector: 'app-todo-form',
  template: `
    <form
      [formGroup]="todoForm"
      (ngSubmit)="todoSubmitted.emit(todoForm.getRawValue())"
    >
      <ion-card>
        <ion-card-title>
          <ion-input
            type="text"
            formControlName="title"
            placeholder="title..."
          ></ion-input>
        </ion-card-title>
        <ion-card-content>
          <ion-input
            type="text"
            formControlName="description"
            placeholder="description..."
          ></ion-input>
          <ion-button [disabled]="!todoForm.valid" type="submit">
            Add Todo
          </ion-button>
        </ion-card-content>
      </ion-card>
    </form>
  `,
  styles: [
    `
      ion-card-title {
        padding-left: 20px;
      }

      ion-card-content {
        padding-top: 0;
      }
    `,
  ],
  imports: [
    ReactiveFormsModule,
    IonInput,
    IonButton,
    IonCard,
    IonCardTitle,
    IonCardContent,
  ],
})