Cascading Dropdown in Angular 7

Cascading Dropdown in Angular 7 And Web API

Prerequisite

• Angular 7 
• Web API
• HTML/Bootstrap
• SQL Server

Cascading DropDownList means a series of dependent DropDownLists where one DropDownList is dependent on another DropDownList. Child DropDownLists are populated based on the item selected in dropdownlist by a user. For example, loading all states in a country.

There are three parts of this article.

1. Create a SQL Server database with two tables, parent and child. 
2. Create a Web API using ASP.NET Web API Project template
3. Create an Angular 7  app

Part 1. Create a Database

For this article, I have created a database and two tables. If you already have data representing a parent-children form, you may skip this step.

Step 1. Open SQL Server Management Studio, connect to a server, and get ready to execute SQL. 

Step 2. Create a database using the following query.

1. create Database CaseCaddingDDL  

Step 3. Create a table, CountryMaster, using the following query.

1. CREATE TABLE [dbo].[CountryMaster](    
2.     [CountryId] [int] NOT NULL,    
3.     [CountryName] [varchar](50) NULL    
4. )              

Step 4. Create a state table, StateMaster, using the following query.

1. CREATE TABLE [dbo].[StateMaster](      
2.     [StateID] [int] NOT NULL,      
3.     [StateName] [varchar](50) NULL,      
4.     [CountryId] [int] NULL      
5. )    

Step 5. Insert seed ata using the following script.

1. INSERT [dbo].[CountryMaster] ([CountryId], [CountryName]) VALUES (1, N'INDIA')  
2. GO  
3. INSERT [dbo].[CountryMaster] ([CountryId], [CountryName]) VALUES (2, N'AUSTRALIA')  
4. GO  
5. INSERT [dbo].[CountryMaster] ([CountryId], [CountryName]) VALUES (3, N'SRILANKA')  
6. GO  
7. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (1, N'Rajasthan', 1)  
8. GO  
9. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (2, N'Delhi', 1)  
10. GO  
11. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (3, N'Gujrat', 1)  
12. GO  
13. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (4, N'UttarPradesh', 1)  
14. GO  
15. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (5, N'New South Wales', 2)  
16. GO  
17. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (6, N'Queensland', 2)  
18. GO  
19. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (7, N'South Australia', 2)  
20. GO  
21. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (8, N'Tasmania', 2)  
22. GO  
23. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (9, N'Western Province', 3)  
24. GO  
25. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (10, N'Central Province', 3)  
26. GO  
27. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (11, N'Southern Province', 3)  
28. GO  
29. INSERT [dbo].[StateMaster] ([StateID], [StateName], [CountryId]) VALUES (12, N'Uva Province', 3)  
30. GO  

 

Now, the database is created and seeded. 

Part 2. Create a Web API

For this article, I create a Web API using ASP.NET Web API. 

Step 1

Let's open Visual Studio 2017 or later and create a new Web API project. 

Step 2

Select File > New > Project.

Step 3

Select Web and ASP.NET Web Application.

Step 4

Then select Web API and then OK.

Your project is created and it will look like the following in Solution Explorer.

Step 5

I create a new Controller named Utility using right click on Controllers folder and select Add, and select Controller.

Select Web API 2 Controller - Empty. Provide a controller name and click Add. 

 

Step 6

Now, import our database table's Entity Framework.

Step 7

I have enabled Cors using the following steps. 

Add the following reference using NuGet. 

 

Add the following line in WebApiConfig to enable Cors.

1. EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");  
2. config.EnableCors(cors);  

WebApiConfig.cs

1. public static class WebApiConfig  
2.    {  
3.        public static void Register(HttpConfiguration config)  
4.        {  
5.            // Web API configuration and services  
6.   
7.            // Web API routes  
8.            config.MapHttpAttributeRoutes();  
9.   
10.            config.Routes.MapHttpRoute(  
11.                name: "DefaultApi",  
12.                routeTemplate: "api/{controller}/{id}",  
13.                defaults: new { id = RouteParameter.Optional }  
14.            );  
15.            EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");  
16.            config.EnableCors(cors);  
17.        }  
18.    }  

Setp 8 

Add the following method to fetch country data.

1. [Route("CountryData")]
2. [HttpGet]
3. public List<CountryMaster> CountryData()
4. {
5.      return ccddlEN.CountryMasters.ToList<CountryMaster>();
6. }

Setp 9 

Add another method to fetch state data. 

1. [Route("StateData")]  
2. [HttpGet]  
3. public List<StateMaster> StateData(int CountryId)  
4. {  
5.     return ccddlEN.StateMasters.Where(s => s.CountryId == CountryId).ToList<StateMaster>();  
6. }  

Complete code for the Utility controller. 

1. using System;  
2. using System.Collections.Generic;  
3. using System.Linq;  
4. using System.Net;  
5. using System.Net.Http;  
6. using System.Web.Http;  
7. using CaseCaddingDDL.Models;  
8.   
9. namespace CaseCaddingDDL.Controllers  
10. {  
11.     [RoutePrefix("Api/Utility")]  
12.     public class UtilityController : ApiController  
13.     {  
14.         CaseCaddingDDLEntities ccddlEN = new CaseCaddingDDLEntities();  
15.         [Route("CountryData")]  
16.         [HttpGet]  
17.         public List<CountryMaster> CountryData()  
18.         {  
19.             return ccddlEN.CountryMasters.ToList<CountryMaster>();  
20.         }  
21.         [Route("StateData")]  
22.         [HttpGet]  
23.         public List<StateMaster> StateData(int CountryId)  
24.         {  
25.             return ccddlEN.StateMasters.Where(s => s.CountryId == CountryId).ToList<StateMaster>();  
26.         }  
27.     }  
28. }  
29.    

Part 3. Create an Angular 7 App

For this part, I will create a Angular 7 app and call API to get the data.

Step 1 

Create an Angular project using the following command in command prompt.

1. ng new casecaddingDDL  

Step 2 

Open Project in Visual Studio Code using the following command in command prompt.

1. cd casecaddingDDL  

1. open .  

Now open project in Visual Studio Code. The project looks like the following:

Step 3

Create a student service in a student folder using the following command.

1. ng g service student   

Step 4

Create a method and call the country data API.

1. CountryDDL(): Observable<CountryVM[]>    
2.   {    
3.     return this.http.get<CountryVM[]>(this.Url + '/CountryData');    
4.   }   

Step 5 

Create a method and call a the state data API.

1. StateDDL(CountryId: string): Observable<StateVM[]>    
2.   {    
3.     return this.http.get<StateVM[]>(this.Url + '/StateData?CountryId='+CountryId);    
4.   }  

Complete code for student.service.ts.

1. import { Injectable } from '@angular/core';  
2. import {HttpClient} from '@angular/common/http';  
3. import { Observable } from 'rxjs';  
4. import { CountryVM } from '../Classes/country-vm';  
5. import { StateVM } from '../Classes/state-vm';  
6.   
7. @Injectable({  
8.   providedIn: 'root'  
9. })  
10. export class StudentService {  
11.   Url = 'http://localhost:50613/Api/Utility';  
12.   constructor(private http:HttpClient) { }  
13.   CountryDDL(): Observable<CountryVM[]>  
14.   {  
15.     return this.http.get<CountryVM[]>(this.Url + '/CountryData');  
16.   }  
17.   StateDDL(CountryId: string): Observable<StateVM[]>  
18.   {  
19.     return this.http.get<StateVM[]>(this.Url + '/StateData?CountryId='+CountryId);  
20.   }  
21. }  

Step 6 

Create a student component in the student folder using the following commad. 

1. ng g c student  

student.component.ts 

1. import { Component, OnInit } from '@angular/core';  
2. import { NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';  
3. import { Observable } from 'rxjs';  
4. import { StateVM } from 'src/app/Classes/state-vm';  
5. import { CountryVM } from 'src/app/Classes/country-vm';  
6. import { StudentService } from 'src/app/Services/student.service';  
7. import { HttpClient, HttpHeaders } from "@angular/common/http";  
8. @Component({  
9.   selector: 'app-student',  
10.   templateUrl: './student.component.html',  
11.   styleUrls: ['./student.component.css']  
12. })  
13. export class StudentComponent implements OnInit {  
14.   private _allCountry: Observable<CountryVM[]>;  
15.   private _allState: Observable<StateVM[]>;  
16.   SelCountryId:string="0";  
17.   FromStudent: any;  
18.   constructor(private formbulider: FormBuilder,private StudentService:StudentService) { }  
19.   FillCountryDDL()  
20.   {  
21.     debugger;  
22.     this._allCountry=this.StudentService.CountryDDL();  
23.   }  
24.   FillStateDDL()  
25.   {  
26.     debugger;  
27.     this._allState=this.StudentService.StateDDL(this.SelCountryId);  
28.   }  
29.   ngOnInit() {  
30.     this.FromStudent = this.formbulider.group({  
31.       StudentName: ['', [Validators.required]],  
32.       Country: ['', [Validators.required]],  
33.       State: ['', [Validators.required]]  
34.     });  
35.     this.FillCountryDDL();  
36.   }  
37.   
38. }         

Front End Design

I have used 2 DropDownLists, one for each entity, country and state.

1. Country - List of countries.
2. State - List of states.

I have added a ChangeEvent to Country and also set ngmodel set property to SelCountryId.

1. <select  class="form-control"  formControlName="Country"  [(ngModel)]="SelCountryId" (change)="FillStateDDL();">      

Student.Component.html

1. <div class="card">  
2.   <div class="card-header" style="text-align:center"><b>WEL COME TO CASECADDING DROP DOWN EXAMPLE</b></div>  
3.   <div class="card-body">  
4.     <form  [formGroup]="FromStudent" >  
5.         <div class="row">  
6.             <div class="form-group col-sm-3">   
7.                 <label for="company">Student Name</label>  
8.                 <input type="text" class="form-                               control"  formControlName="StudentName"   id="company" placeholder="Enter Student Name" >  
9.             </div>  
10.             <div class="form-group col-sm-3">   
11.                 <label for="company">Country</label>  
12.                 <select  class="form-control"  formControlName="Country"  [(ngModel)]="SelCountryId" (change)="FillStateDDL();">  
13.                   <option value="">--Select--</option>  
14.                   <option *ngFor="let Country of _allCountry | async" value={{Country.CountryId}}>  
15.                       {{Country.CountryName}}  
16.                   </option>  
17.             </select>  
18.             </div>  
19.             <div class="form-group col-sm-3">   
20.   
21.                 <label for="company">State Name</label>  
22.                 <select  class="form-control"  formControlName="State">  
23.                   <option value="">--Select--</option>  
24.                   <option *ngFor="let State of _allState | async" value={{State.StateId}}>  
25.                       {{State.StateName}}  
26.                   </option>  
27.             </select>  
28.             </div>  
29.         </div>  
30.     </form>  
31.   </div>   

Step 7

Let's run the project using the following command in terminal and check the results.

1. npm start