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 :  Dynamically Upload Multiple Images Using PHP and jQuery

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 *ngIf="getCategories()" [(ngModel)]="selectedCategory" (change)="onSelectCategory($event.target.value)" class="pakainfo form-control input-lg" id="category"
       >
       <option value="0">Select Category</option>
      <option *ngFor="let category of getCategories()" value= {{category.id}}>{{category.name}}</option>
    </select>
  </div>
 
  <div class="pakainfo form-group">
    <label class="pakainfo control-label" for="SubCategories">SubCategories:</label>
    <select *ngIf="sub_categories" [(ngModel)]="selectedSubcategory" (change)="onSelectSub_category($event.target.value)" class="pakainfo form-control input-lg" id="subcategory">
        <option value="0">Select SubCategory</option>
      <option *ngFor="let subcategory of sub_categories" value= {{subcategory.id}}>{{subcategory.name}}</option>
    </select>
  </div>
 
  <div class="pakainfo form-group">
    <label class="pakainfo control-label" for="Items">Items:</label>
    <select class="pakainfo form-control input-lg" id="item">
        <option *ngIf="!selectedSubcategory" value="0">Select Items</option>
        <option *ngFor="let item of items" value= {{item.id}}>{{item.name}}</option>
    </select>
  </div>
</div>

Angular 6 CRUD Operations Application Tutorials

Read :

Also Read :  Laravel 5.7 Image File Validator Validation

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]