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.

Read Also:  Remove Duplicate Objects from Array Jquery 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 :

Read Also:  Woocommerce Get product category name in array

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  How to $state.go() in Angularjs?
  2. Read Also:  call to undefined function base_url() Fixed
  3. Read Also:  PHP for Dummies | how php works? | What is PHP?
  4. Read Also:  php slideshow in javascript source code
  5. Read Also:  Dynamic and Dependent Dropdown list using AngularJS with PHP
  6. Read Also:  Pure JavaScript Star Rating Example
  7. Read Also:  Get Radio Button value using jQuery Example
  8. Read Also:  Laravel 6.2 Get Last Inserted ID
  9. Read Also:  Simple Vue Router Example From Scratch
  10. Read Also:  Dynamic and Dependent Dropdown list using AngularJS with PHP
CLOSEX