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