Cascading dropdown with table data using Angular -4

I am writing this blog because to implement cascading drop-downs was my very first task when I have just started learning new scripting language Angular4 and developing my very first application.

I was facing too much difficulties when I was implementing this. I did lots of googling/research on it and then after with fusion of multiple articles I was able to achieve it.

So today I am going to explore how we can implement cascading drop-down with table/grid data.

Step 1: Create a new project and install required node modules.

Step 2: Create HTML template for the component in which you are going implement this

I have created a new project for this demo so I doing changes in app component. You can do it in your respective component

<div style="text-align:center">
 <h1>
 Cascading Dropdown with table fromat data
 </h1>
<table width="500px">
 <tr>
 <th>
 Category
 </th>
 <th>
 Sub Category
 </th>
 </tr>
 <th>
 </th>
 <tr>
 <td>
 <label>Caregory:</label>
 <select id="ddlCategory" style="width:100px;">
 <option value="0">--Select--</option>
 </select>
 </td>
 <td>
 <div>
 <label>Subcategory:</label>
 <select id="ddlSubCategory" style="width:100px;">
 <option value="0">--Select--</option> 
 </select>
 </div>
 </td>
 </tr>
</table>
</div>

Step 3:

Create new service and functions into the service those will be used for getting data to fill our drop-downs

import { Injectable } from '@angular/core';
import { Category } from '../Models/category';
import { SubCategory } from '../Models/SubCategory';
@Injectable()
export class Service {
 getCategories() {
 return [
 new Category(1, 'Expense'),
 new Category(2, 'Income'),
 new Category(3, 'Miscellaneous') 
 ];
 }
 getSubCategories() {
 return [
 new SubCategory(1, 1, 'Expense 1'),
 new SubCategory(2, 1, 'Expense 2'),
 new SubCategory(3, 1, 'Expense 3'),
 new SubCategory(4, 1, 'Expense 4'),
 new SubCategory(5, 2, 'Income 1'),
 new SubCategory(6, 2, 'Income 2'),
 new SubCategory(7, 2, 'Income 3'),
 new SubCategory(8, 3, 'Miscellaneous 1'),
 new SubCategory(9, 3, 'Miscellaneous 2'),
 new SubCategory(10, 3, 'Miscellaneous 3')
 ];
 }
}

Step 4:

Create a model of Category.

export class Category {
 constructor(public Category_Id: number, public Category_Name: string) { }
}

Step 5:

Create a model of SubCategory.

export class SubCategory {
 constructor(public SubCategory_ID: number, public Category_ID: number, public SubCategory_Name: string) { }
}

Step 6:

Do the code in Component.ts file to get Category data.

— Import models

— Import Service

— Call service to get data of Categories and assign it to Categories

import { Component } from '@angular/core';
import { Service } from './Service/service';
import { Category } from './Models/Category';
import { SubCategory } from './Models/SubCategory';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
 providers: [Service]
})
export class AppComponent { 
 Categories: Category[];
 numbers: number[] = [1,2,3];
 constructor(private _dataService: Service) { 
 this.Categories = this._dataService.getCategories();
 }
}

Step 7:

Fill categories Drop down in html template

<select id="ddlCategory" style="width:100px;">
 <option value="0">--Select--</option>
 <option *ngFor="let category of Categories" value={{category.Category_Id}}>{{category.Category_Name}}</option>
 </select>

Step 8:

Now we want to fill sub categories on the selection of Category so we will make the function that will be called on Category selection.

In app.component.ts we will create function

onSelect(Category_ID,index) {
 this.Subcategories[index] = this._dataService.getSubCategories().filter((item)=> item.Category_ID == Category_ID);
 }

Assign that function on change event of Category drop-down

<select id="ddlCategory" (change)="onSelect($event.target.value, number)" style="width:100px;">
 <option value="0">--Select--</option>
 <option *ngFor="let category of Categories" value={{category.Category_Id}}>{{category.Category_Name}}</option>
 </select>

Step 9:

Fill data of sub category in html template.

<select id="ddlSubCategory" style="width:100px;">
 <option *ngIf='selectedCategory[number] == 0' value="0">--Select--</option>
 <option *ngFor="let sub of Subcategories[number]" value={{sub.SubCategory_ID}}>{{sub.SubCategory_Name}}</option> 
 </select>

Step 10:

And we are done.Now run your project and you will get your desired output.

You will get output like:¬ http://g.recordit.co/GrRyrLVIe2.gif¬

Cheers..! Hope this will help you…:)

Written by Mitesh Gadhiya