note-details.page.html

<ion-toolbar>
  <ion-buttons slot="start">
    <ion-back-button defaultHref="/"></ion-back-button>
  </ion-buttons>
  <ion-title class="ion-text-center">Note Details</ion-title>
  <ion-buttons slot="end">
    <ion-button slot="icon-only" (click)="showPrompt()">
      <ion-icon name="alarm-outline"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-content fullscreen>
  <ion-card class="card-max-width">
    <ion-card-header color={{note.colorTag}}>
    <ion-card-title>
      <ion-input
        [(ngModel)]="note.title"
        maxLength="30"
        placeholder="Name"
        class="bold"
      ></ion-input>
      <ion-button fill="clear" class="special" (click)="showColorPrompt()">       
        <ion-icon name="color-palette" color="dark"></ion-icon>
    </ion-button>
    </ion-card-title>
  </ion-card-header>
      <quill-editor 
        [(ngModel)]="note.body" [bounds]="'self'" placeholder=" "
      ></quill-editor>
    <ion-footer *ngIf="!note.id">
      <ion-toolbar color="success">
        <ion-button
          expand="full"
          fill="clear"
          color="light"
          (click)="addNote()"
        >
          <ion-icon name="checkmark" slot="start"></ion-icon>
          Add Idea
        </ion-button>
      </ion-toolbar>
    </ion-footer>

    <ion-footer *ngIf="note.id">
      <ion-row no-padding text-center>
        <ion-col size="6">
          <ion-button
            expand="block"
            fill="solid"
            color="danger"
            (click)="deleteNote()"
          >
            <ion-icon name="trash" slot="start"></ion-icon>
            Delete
          </ion-button>
        </ion-col>
        <ion-col size="6">
          <ion-button
            expand="block"
            fill="solid"
            color="green"
            (click)="updateNote()"
          >
            <ion-icon name="save" slot="start"></ion-icon>
            Save Changes
          </ion-button>
        </ion-col>
      </ion-row>
    </ion-footer>
  </ion-card>
</ion-content>