Posted on Updated on - Arjun

Cascading dropdown in Angular

In this article, you will learn how to use cascading DropDownList using Angular application. In following tutorial you gonna use Angular CLI to create an application. Here is the official website of Angular CLI.

Why Angular CLI

The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices. You can Generate components, routes, services and pipes with a simple command. The CLI will also create simple test shells for all of these.Ruing test and you can easily test your app locally while developing.

Cascading dropdown in Angular

Step 1 – So let create a project – This tutorial assumes that you have already installed “Angular CLI”, if not please visit here and install it. After successful installation you should able to run below command to create and to serve project.

Step2 – Add FormsModule module to imports array in the app.module.ts file.

Step 3 – Edit app.component.ts file. We have added few methods to supply sample data and onSelectCountry,onSelectState methods to detect the change in the parent drop down.

step 4 – now update your app.component.html view file with below content.

step 5 – As you already started server in the step 1, now you should able to see output something like below shown image. If your is not running, issue ng serve from the root of your project.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

I am Arjun from Hyderabad (India). I have been working as a software engineer from last 7+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets. Protection Status