Tag Input In Angular 6 With Mysql API

Tag input is a very good feature for a web development work, It helps to tag multiple categories or set by entering key. In case of enrolling your application form or resume you need to put your skills, so in this case, also you need this functionality. WordPress also having some default tag functionality to make sure a single post related with which kind of blog. We have seen this in jquery, but In angular it quite different and very simple to implement. Here this blog all about how to tag input in angualr6. If you can learn this tagging input in angular 6, then you can easily implement in other angular 7 or any updated version also. But Here most important functionality is how to use this dynamically means you have to store skills or categories in the database and fetch to populate it and update it. Here this blog I have given a full demo with sample code with an example, which could be easily understood by the user.

Step-1:

Setup your angular 6 CLI in your system.

Step-2:

npm install ngx-chips --save // OR
yarn add ngx-chips

1 2	npm install ngx-chips --save // OR yarn add ngx-chips

If you want to go for documentation click here

Step-3:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
<strong>import { TagInputModule } from 'ngx-chips';</strong>
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { SignupComponent } from './signup/signup.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AppRoutingModule } from './app-routing.module';
import { AuthService} from './_services';
import { AuthGuard } from './_guards';

@NgModule({
declarations: [
AppComponent,
LoginComponent,
SignupComponent,
DashboardComponent
],
imports: [
BrowserModule,
FormsModule,
<strong>TagInputModule</strong>,
ReactiveFormsModule,
HttpClientModule,
AppRoutingModule
],
providers: [AuthGuard,AuthService],
bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';

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

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

<strong>import { TagInputModule } from 'ngx-chips';</strong>

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { LoginComponent } from './login/login.component';

import { SignupComponent } from './signup/signup.component';

import { DashboardComponent } from './dashboard/dashboard.component';

import { AppRoutingModule } from './app-routing.module';

import { AuthService} from './_services';

import { AuthGuard } from './_guards';

@NgModule({

declarations: [

AppComponent,

LoginComponent,

SignupComponent,

DashboardComponent

imports: [

BrowserModule,

FormsModule,

<strong>TagInputModule</strong>,

ReactiveFormsModule,

HttpClientModule,

AppRoutingModule

providers: [AuthGuard,AuthService],

bootstrap: [AppComponent]

})

export class AppModule { }

Step-4:

Put this HTML in your component.html file where you want to place this tag input functionality.

<div class="tags well">
<labelfor="tag"class="control-label">Tag</label>
<form[formGroup]="skillsForm"(ngSubmit)="onSubmit()">

<divclass="bs-example wd100">

<tag-inputformControlName="skill"[ngModel]="skillarray">
</tag-input>

</div>

<button[disabled]="loading"class="btn btn-primary">Submit</button>
</form>

<labelfor="tag"class="control-label">Tag</label>

<form[formGroup]="skillsForm"(ngSubmit)="onSubmit()">

<divclass="bs-example wd100">

<tag-inputformControlName="skill"[ngModel]="skillarray">

</tag-input>

</div>

<button[disabled]="loading"class="btn btn-primary">Submit</button>

</form>

Step-5:

Now we can create an API file for the tags.

<?php

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

$input = file_get_contents('php://input');

$redgister_data = json_decode($input,true);
$conn = mysqli_connect("localhost", "root", "", "demo");


$response['status'] = false;
$userdata = json_decode( $redgister_data['userid'],true);
$user_id = $userdata['data']['user_id'];

$result = mysqli_query($conn,"SELECT * from skills where user_id = '" . $user_id . "'"); 
$data = mysqli_fetch_array($result); 
//print_r($data);
if(!empty($data))
{
$response['status'] = true;
$response['skills'] = $data['skill'];

}

echo json_encode($response);
exit;

?>

<?php

header('Access-Control-Allow-Origin: *');

header("Access-Control-Allow-Credentials: true");

header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

header('Access-Control-Allow-Headers: Content-Type, Content-Range, Content-Disposition, Content-Description');

$input = file_get_contents('php://input');

$redgister_data = json_decode($input,true);

$conn = mysqli_connect("localhost", "root", "", "demo");

$response['status'] = false;

$userdata = json_decode( $redgister_data['userid'],true);

$user_id = $userdata['data']['user_id'];

$result = mysqli_query($conn,"SELECT * from skills where user_id = '" . $user_id . "'");

$data = mysqli_fetch_array($result);

//print_r($data);

if(!empty($data))

{

$response['status'] = true;

$response['skills'] = $data['skill'];

}

echo json_encode($response);

exit;

Step-6:

Call this API in respective component.ts

import { Component, OnInit, AfterViewInit} from '@angular/core';
import { AuthGuard } from '../_guards';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../_services';
import { first, toArray } from 'rxjs/operators';



@Component({
selector:'app-dashboard',
templateUrl:'./dashboard.component.html',
styleUrls: ['./dashboard.component.css'],

})
export class DashboardComponent implements OnInit {

skill:any;
//display: string;
publicuserData:any= {};
skillsForm:FormGroup;
loading=false;
submitted=false;
userDefaultSkill:string;
skillarray:any;
constructor(
private_authService:AuthService,
privatecanactivate:AuthGuard,
privateformBuilder:FormBuilder,
privateroute:ActivatedRoute,
privaterouter:Router,

) {

this._authService.getSkills()
.pipe(first())
.subscribe(
data=> {
this.userData=data;
this.userDefaultSkill=this.userData.skills;
this.skillarray=this.userDefaultSkill.split(",");
console.log(this.skillarray);
},
error=> {
// this.alertService.error(error);
this.loading=false;
});

}

ngOnInit() {
this.canactivate.canActivate();
  this.skillsForm = this.formBuilder.group({
skill: ['', Validators.required]
});

}
getf() { returnthis.skillsForm.controls; }

onSubmit() {
this.submitted=true;

console.log(this.f.skill.value);

// stop here if form is invalid
if (this.skillsForm.invalid) {
return;
}
//console.log(this.f);return false;
this.loading=true;
this._authService.dashboard(this.f.skill.value)
.pipe(first())
.subscribe(
data=> {
// this.alertService.success('Registration successful', true);
this.userData=data;
// this.alertService.success('Registration successful', true);
if(this.userData.status==true){
alert('Skill saved successful');
this.loading=false;
}

this.router.navigate(['/']);
},
error=> {
// this.alertService.error(error);
this.loading=false;
});
}

}

import { Component, OnInit, AfterViewInit} from '@angular/core';

import { AuthGuard } from '../_guards';

import { Router, ActivatedRoute } from '@angular/router';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { AuthService } from '../_services';

import { first, toArray } from 'rxjs/operators';

@Component({

selector:'app-dashboard',

templateUrl:'./dashboard.component.html',

styleUrls: ['./dashboard.component.css'],

})

export class DashboardComponent implements OnInit {

skill:any;

//display: string;

publicuserData:any= {};

skillsForm:FormGroup;

loading=false;

submitted=false;

userDefaultSkill:string;

skillarray:any;

constructor(

private_authService:AuthService,

privatecanactivate:AuthGuard,

privateformBuilder:FormBuilder,

privateroute:ActivatedRoute,

privaterouter:Router,

) {

this._authService.getSkills()

.pipe(first())

.subscribe(

data=> {

this.userData=data;

this.userDefaultSkill=this.userData.skills;

this.skillarray=this.userDefaultSkill.split(",");

console.log(this.skillarray);

error=> {

// this.alertService.error(error);

this.loading=false;

});

}

ngOnInit() {

this.canactivate.canActivate();

this.skillsForm = this.formBuilder.group({

skill: ['', Validators.required]

});

}

getf() { returnthis.skillsForm.controls; }

onSubmit() {

this.submitted=true;

console.log(this.f.skill.value);

// stop here if form is invalid

if (this.skillsForm.invalid) {

return;

}

//console.log(this.f);return false;

this.loading=true;

this._authService.dashboard(this.f.skill.value)

.pipe(first())

.subscribe(

data=> {

// this.alertService.success('Registration successful', true);

this.userData=data;

// this.alertService.success('Registration successful', true);

if(this.userData.status==true){

alert('Skill saved successful');

this.loading=false;

}

this.router.navigate(['/']);

error=> {

// this.alertService.error(error);

this.loading=false;

});

}

Step-7:

Database :

--
-- Database: `demo`
--

-- --------------------------------------------------------

--
-- Table structure for table `skills`
--

CREATE TABLE `skills` (
`id` int(11) NOT NULL,
`user_id` int(11) NOT NULL,
`skill` varchar(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `skills`
--
ALTER TABLE `skills`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `skills`
--
ALTER TABLE `skills`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;

-- Database: `demo`

-- --------------------------------------------------------

-- Table structure for table `skills`

CREATE TABLE `skills` (

`id` int(11) NOT NULL,

`user_id` int(11) NOT NULL,

`skill` varchar(200) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- Indexes for dumped tables

-- Indexes for table `skills`

ALTER TABLE `skills`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `skills`

ALTER TABLE `skills`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=23;

Now you can download the code and put in your project folder, If you are facing any issues then feel free to ping me in below message box, So that I will reach out with some solution.

I hope this blog Tag input In angular 6 with Mysql API helps you a lot.

Download Sample Code

Download the source code