Skip to main content

Angular Cascading Dropdown Example With Demo

Today, We want to share with you Angular Cascading Dropdown Example With Demo.In this post we will show you country state city drop down list using angularjs, hear for cascading dropdown in mvc using angularjs we will give you demo and example for implement.In this post, we will learn about populate one dropdown based on selection in another dropdown angularjs with an example.

Angular Cascading Dropdown Example With Demo

There are the Following The simple About Angular Cascading Dropdown Example With Demo Full Information With Example and source code.

As I will cover this Post with live Working example to develop cascading dropdown in mvc using angularjs, so the some major files and Directory structures for this example is following below.

Step 1: Setup Angular Project

installed “Angular CLI

ng new YOUR_APP_NAME
cd YOUR_APP_NAME
ng serve

Now, Include angular FormsModule module to simple imports array in the file name like app.module.ts file.

Also Read :  Laravel MySQL Advanced Query Techniques with Example

Step 2 : app.component.ts file

onSelectCategory,onSelectSub_category Edit file : app.component.ts file

import { Component } from '@angular/core';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  selectedCategory = 0;
  selectedSubcategory = 0;
 
  title = 'app';
  sub_categories = [];
  items = [];
 
 
  onSelectCategory(category_id: number) {
    this.selectedCategory = category_id;
    this.selectedSubcategory = 0;
    this.items = [];
    this.sub_categories = this.getSubCategories().filter((item) => {
      return item.category_id === Number(category_id)
    });
  }
 
  onSelectSub_category(sub_category_id: number) {
    this.selectedSubcategory = sub_category_id;
    this.items = this.getItems().filter((item) => {
      return item.sub_category_id === Number(sub_category_id)
    });
  }
 
  getCategories() {
    return [
      { id: 1, name: 'PHP' },
      { id: 2, name: 'Javascript' },
      { id: 3, name: 'SEO' }
    ];
  }
 
  getSubCategories() {
    return [
      { id: 1, category_id: 1, name: 'Laravel' },
      { id: 2, category_id: 1, name: 'Wordpress' },
      { id: 3, category_id: 2, name: 'Angularjs' },
      { id: 4, category_id: 2, name: 'vuejs' },
      { id: 5, category_id: 3, name: 'on-page seo' },
      { id: 6, category_id: 3, name: 'off-page seo' },
    ]
  }
 
  getItems() {
    return [
      { id: 1, sub_category_id: 1, name: 'Model' },
      { id: 2, sub_category_id: 1, name: 'Middalware' },
      { id: 3, sub_category_id: 1, name: 'Route' },
      { id: 4, sub_category_id: 1, name: 'Controller' },
      { id: 5, sub_category_id: 2, name: 'Google' },
      { id: 6, sub_category_id: 2, name: 'Plugin' },
      { id: 7, sub_category_id: 2, name: 'Thems' },
      { id: 8, sub_category_id: 2, name: 'Yoast' },
      { id: 9, sub_category_id: 3, name: 'ng-app' },
      { id: 10, sub_category_id: 3, name: 'ng-bind' },
      { id: 11, sub_category_id: 3, name: 'ng-controller' },
      { id: 12, sub_category_id: 4, name: 'v-for' },
      { id: 13, sub_category_id: 4, name: 'v-if' },
      { id: 14, sub_category_id: 5, name: 'meta-tags' },
      { id: 15, sub_category_id: 5, name: 'keywords' },
      { id: 16, sub_category_id: 5, name: 'titles' },
      { id: 17, sub_category_id: 6, name: 'facebook' },
      { id: 18, sub_category_id: 6, name: 'google plus' },
    ]
  }
}

step 3 : HTML Files

app.component.html

<h2>populate one dropdown based on selection in another dropdown angularjs</h2>
<div class="pakainfo container">
  <div style="text-align:center">
    <h1>
      Welcome to {{title}}!!
    </h1>
  </div>
 
  <div class="pakainfo form-group">
    <label class="pakainfo control-label" for="Category">Category:</label>
    
       Select Category
      {{category.name}}
    
  </div>
 
  <div class="pakainfo form-group">
    <label class="pakainfo control-label" for="SubCategories">SubCategories:</label>
    
        Select SubCategory
      {{subcategory.name}}
    
  </div>
 
  <div class="pakainfo form-group">
    <label class="pakainfo control-label" for="Items">Items:</label>
    
        Select Items
        {{item.name}}
    
  </div>
</div>

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Simple C Programming Structure Examples

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Angular Cascading Dropdown Example With Demo.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Gondaliya Jaydeep

Hi, I’m Jaydeep Gondaliya, PHP developer.Pakainfo.com is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.Any visitors of this site are free to browse our tutorials, live demos, Examples and download scripts.If you have a project that you want to get started, launch quickly, contact me. Email : [email protected]