How to create a textbox with Chips functionality?

Hi

I have a textbox for entering “skills” I want to give user the ability to enter his skills as “chips”, I saw “chips” element in ionic2 but I don’t know how can I combine it with “textbox”

something like https://material.angularjs.org/latest/demo/chips

2 Likes

This is pretty simple

import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  template: `
    <ion-content>
      <form #form="ngForm" (ngSubmit)="addSkill(form.value)">
        <ion-item>
          <ion-label>skills</ion-label>
          <ion-input [(ngModel)]="skillInput" name="skillValue"></ion-input>
          <button ion-button item-right type="submit" icon-only>
          <ion-icon name="checkmark"></ion-icon>
        </button>
        </ion-item>
      </form>
      <ion-chip *ngFor="let skill of skillList">
        <ion-label>{{skill }}</ion-label>
      </ion-chip>
    </ion-content>
  `
})
export class HomePage {
  public skillInput: string = '';
  public skillList: any[] = [];
  addSkill(formValue) {
    console.log()
    this.skillList.push(formValue.skillValue)
    this.skillInput = ''
  }
}

Thanks for answer, but what I really want form UX perspective is that chips are inside the textbox, like https://material.angularjs.org/latest/demo/chips

@RezaRahmati Hello, Did you find the solution? I m looking for same. I want to show chips inside the textbox or say ion-input field.

Nope, I add another text box and add button to add chips