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.

0 0 votes
Article Rating
Notify of
1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
2 years ago

Thanks Arjun 🙂 Protection Status
Would love your thoughts, please comment.x