Awesome

ionic-tags-input

A ionic tags input component for ionic2 中文文档

DEMO

Install

npm install ionic-tags-input --save

Use

import the module:

...
import {IonTagsInputModule} from "ionic-tags-input";

@NgModule({
 ...
 imports: [
   IonTagsInputModule,
   ...
 ],
 ...
})
export class AppModule {}

Example

Basic

<ion-tags-input [(ngModel)]="tags" (onChange)="onChange($event)"></ion-tags-input>

export class YourPage {

  tags = ['Ionic', 'Angular', 'TypeScript'];

  constructor() {}

  onChange(val){
    console.log(tags)
  }

}

set placeholder

<ion-tags-input [(ngModel)]="tags" [placeholder]="'add tag'"></ion-tags-input>

set input type

*** Can not be verified, but can set the keyboard type ***

<ion-tags-input [(ngModel)]="tags" [type]="'email'"></ion-tags-input>

can not be repeated

<ion-tags-input [(ngModel)]="tags" [once]="'true'"></ion-tags-input>

Style

Setting mode

<ion-tags-input [(ngModel)]="tags" [mode]="'md'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [mode]="'ios'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [mode]="'wp'"></ion-tags-input>

Setting color:

<ion-tags-input [(ngModel)]="tags" [color]="'light'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [color]="'secondary'"></ion-tags-input>
<ion-tags-input [(ngModel)]="tags" [color]="'danger'"></ion-tags-input>

All color: light secondary danger dark warn gray purple

Special color: random

Hide remove button

<ion-tags-input [(ngModel)]="tags" [hideRemove]="true"></ion-tags-input>

Separator

Use separator submit input

<ion-tags-input [(ngModel)]="tags" [separatorStr]="','"></ion-tags-input>

Keyboard

Use Backspace remove tag

<ion-tags-input [(ngModel)]="tags" [canBackspaceRemove]="true"></ion-tags-input>

Use Enter submit input

<ion-tags-input [(ngModel)]="tags" [canEnterAdd]="true"></ion-tags-input>

Verify

A function whose argument is a string, returns a boolean value

<ion-tags-input [(ngModel)]="tags" [verifyMethod]="verifyTag"></ion-tags-input>

export class YourPage {

  tags = ['Ionic', 'Angular', 'TypeScript'];

  constructor() {}

  verifyTag(str: string): boolean{
    return str !== 'ABC' && str.trim() !== '';
  }

}

API

Input

Output