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 :  Vuejs set focus Textbox Components

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 Ajax Autocomplete Search Box Example

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.

Recommended For You.

AngularJS Expressions Tutorial with Example
Today, We want to share with you AngularJS Expressions Tutorial with Example.In this post we will show you String Expression

Add a Comment

Your email address will not be published. Required fields are marked *