ionicで検索フォームを作ってみた

できたもの

まず先にどんなものを作るのかというところですが下図です。

検索条件が追加されていくような感じのフォームです。
ionicが自動で生成するプログラム部分は割愛して、今回追加したコードだけ記載しています。

home.ts

export class HomePage {

// 省略

  public wordInput: string = '';
  public words: string[] = [];

  addWord(formValue) {
    this.words.push(formValue.wordValue)
    this.wordInput = ''
  }

  delete(idx: number) {
    this.words.splice(idx, 1);
  }

}

home.html

<form #form="ngForm" (ngSubmit)="addWord(form.value)">
  <ion-item>
    <ion-label>
      <ion-icon name="search"></ion-icon>
    </ion-label>
    <ion-input [(ngModel)]="wordInput" name="wordValue"></ion-input>
    <button ion-button item-right type="submit" icon-only>
      <ion-icon name="md-arrow-forward"></ion-icon>
    </button>
  </ion-item>
</form>
<div class="tags">
  <ion-chip *ngFor="let word of words; let i = index" id="word_{{i}}">
    <ion-label>{{ word }}</ion-label>
    <button ion-button clear color="dark" (click)="delete(i)">
      <ion-icon name="close-circle"></ion-icon>
    </button>
  </ion-chip>
</div>

home.scss

.tags {
  display: flex;
  padding-top: 5px;
  overflow: scroll;
}