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.

ionic tag input

Setting up Ionic tag input project

Step 1: Let 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 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 './';
import { TagInputModule } from 'ngx-chips';

  imports: [
        path: '',
        component: HomePage
  declarations: [HomePage]
export class HomePageModule {}

Step 3: Import BrowserAnimationsModule in 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';

  declarations: [AppComponent],
  entryComponents: [],
  imports: [
  providers: [
    { 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 add the ngx-chips component in our component template.

      Ionic Blank

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

Step 5: Add the following code in the file,

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

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

  upload(form) {
    form.tags = this.tagArrayToString(form.tags);

  tagArrayToString(tagArray: string[]): string {
    if (Array.isArray(tagArray) && tagArray.length > 0) {
      const tags = 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 input using the ngx-chip on npmjs repository.

Related posts

Spread the love

Leave a Comment

Your email address will not be published.

Scroll to Top