Ionic tag Input - example using the ngx-chip plugin

Tag input allows us to select multiple values from a list of options and each tag data is can be added and removed from Ionic tag input. In Ionic 4 an ion-input element does not allow tags, but in this article, we will learn third-party plugin to allow multiple tags in the input. Here is a screenshot of the tags example.

Setting up Ionic tag input project

Step 1: Let’s first create an Ionic tags input project

ionic start tags blank --type=angular
cd tags

Step 2: Add and install a third-party plugin ngx-chips

npm i ngx-chips --save

We also need to install angular animation, as the ngx-chip plugin is dependent on animation.

npm i @angular/animations --save

Step 2: Import the TagInputModule module in home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
import { TagInputModule } from 'ngx-chips';

@NgModule({
  imports: [
    TagInputModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Step 3: Import BrowserAnimationsModule in the app.module.ts file

For animation, we need to import BrowserAnimationsModule in the app.module.ts file

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
 ....
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ionic tags input example

We had completed our setting and configuring a project for the Ionic tags tutorial. Now let’s add the ngx-chips component to our component template.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <div>
      <ion-card>
        <ion-card-content>
          <form [formGroup]="form">
            <ion-item>
              <ion-label position="floating">Code</ion-label>
              <ion-input formControlName="code" type="text" required>
              </ion-input>
            </ion-item>
            <ion-item>
              <ion-label position="floating">Tags</ion-label>
              <tag-input formControlName="tags" [separatorKeyCodes]="[32]">
              </tag-input>
            </ion-item>
          </form>
          <ion-item lines="none" float-right>
            <ion-button (click)="upload(form.value)">
              Search</ion-button>
          </ion-item>
        </ion-card-content>
      </ion-card>
    </div>
  </div>
</ion-content>

Step 5: Add the following code in the home.page.ts file,

import { Component } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { TagsHelper } from '../../helpers/tags-helper';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  form: FormGroup;
  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      code: [],
      tags: [[]],
    });
  }

  upload(form) {
    console.log(form.tags);
    form.tags = this.tagArrayToString(form.tags);
    console.log(form.tags);
  }

  tagArrayToString(tagArray: string[]): string {
    if (Array.isArray(tagArray) && tagArray.length > 0) {
      const tags = tagArray.map((e: any) => `[${e.value}]`);
      const tagString = tags.join();
      return tagString;
    } else {
      return '';
    }
  }

}

Out of tag-input is in array of object as
0: {display: “Great”, value: “Great”}
1: {display: “Good”, value: “Good”}
2: {display: “Excellent”, value: “Excellent”}
length: 3
__proto__: Array(0)

We are using a method to separate and get the value of tags input to string of array as [Good],[Great],[Excellent] by using the tagArrayToString () method.

For more information on ionic tags, the input uses the ngx-chip on npmjs repository.

Related posts

Ionic tag Input – example using the ngx-chip plugin

Ionic tag Input – example using the ngx-chip plugin

Setting up Ionic tag input project

Ionic tags input example

Leave a Reply Cancel reply