Cascading Drop-Down In Table Data

I am a newbie for Angular development and when I have started learning Angular and developing applications, the requirement was to implement cascading dropdown and at a beginning level, I was facing difficulties to implement it.

Now after my research I have successfully implemented it and am sharing with you all so if anyone of you need to, then you can go through it and implement as per your requirements.

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 a 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

Now run your project and you will get your desired output.

output

Hope this will help you.

3 Comments

Join the conversation! Your thoughts help the community grow.

Kenny JohnJoseph6y ago
Is there any demo page. I find it difficult o work on this code.
dalachha Solanki7y ago
Hi, Can you have demo for that?, i have stuck in line: <option *ngIf='selectedCategory[number] == 0' value="0">--Select--</option>
sachin dubey9y ago
Do you have any example, where you are binding these dropdown through the webapi.