How to create a textbox with Chips functionality?


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


This is pretty simple

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

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

Thanks for answer, but what I really want form UX perspective is that chips are inside the textbox, like

@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