CODEWITHSUNDEEP
angular
chethu
chethu

Reputation: 374

How to change second dropdown values based on other first dropdown values in angular 4

I have a response like this 

[
{
"categoryId": 1,
"categoryName": "Painting",
"categoryDesc": "Painting of all types",
"categoryServicemodel": [
  {
    "serviceId": 1,
    "serviceName": "Test12",
    "serviceDesc": "test12",
    "isActive": 1
  },
  {
    "serviceId": 3,
    "serviceName": "TESTINGEXAMPLE ",
    "serviceDesc": "TESTINGEXAMPLE Details Information",
    "isActive": 1
  },
  {
    "serviceId": 12,
    "serviceName": "New Painters",
    "serviceDesc": "office paintings ",
    "isActive": 2
  },
  {
    "serviceId": 11,
    "serviceName": "ABC Painters",
    "serviceDesc": "painting of all types",
    "isActive": 1
  }
],
"active": 1
 },
{
"categoryId": 2,
"categoryName": "string",
"categoryDesc": "string",
  "categoryServicemodel": [
  {
    "serviceId": 2,
    "serviceName": "Test15",
    "serviceDesc": "test15",
    "isActive": 1
  }
],
"active": 0
  },
  {
"categoryId": 4,
"categoryName": "carpenter",
"categoryDesc": "Carpenter",
"categoryServicemodel": [
  {
    "serviceId": 5,
    "serviceName": "Test Carpenter ",
    "serviceDesc": "Test carpenter Description",
    "isActive": 1
  }
],
"active": 0
 },
 {
"categoryId": 6,
"categoryName": "Telecommunications service provider",
"categoryDesc": "TSPs provide access to telephone and related communications services",
"categoryServicemodel": [
  {
    "serviceId": 4,
    "serviceName": "ABC providers",
    "serviceDesc": "Providing all types of networks",
    "isActive": 1
  }
],
"active": 0
  },

{
"categoryId": 40,
"categoryName": "Automobiles",
"categoryDesc": " testing vehicles",
"categoryServicemodel": [],
"active": 0
 }
  ]

Then i have a select field 

 <div class="main-search-input-wrap">
     <div class="main-search-input fl-wrap">
         <div class="main-search-input-item">

           <select data-placeholder="All Categories" class="category" value="category.category.categoryName">
              <option  selected="selected" style="display:none">Select Category</option>
              <option class="select" (click)="onSelect(category)" 
              *ngFor="let category of categories" value="category"> 
               {{category.categoryName}}</option>
           </select>


  <div class="main-search-input-item location" id="autocomplete-container"  *ngIf="selected">

      <select data-placeholder="All Cities" class="services location" value="category.categoryName">
             <option selected="selected" style="display:none">select type of services</option>
             <option *ngFor="let category of selected.categoryServicemodel; let i = index" value="category">{{category.serviceName}}</option>
     </select>
   </div>


   <button (click)="routeToSearch()" class="main-search-button">Search</button>
     </div>
  </div>

This is my component.ts

export class Component {
 categories: any[];
 services: any[]
 cities: any[];
 selected: any ={}

 constructor(){
      getAllCategories(){
  this.postService.getAllCategories()
      .subscribe(data =>{
        this.categories = data.json();
        console.log(this.categories)
      })
}

getAllService(){
  this.postService.getAllServices()
      .subscribe( res =>{
        this.services = res.json();
      })
   }

   onSelect(category) {
  this.selected = category;
   console.log(category);
}

  }
}

Sorry for bad code fomatting in the first field i need to select category Name based on that other field service name should display see in response.... In the first response i have category name when i selected that field all service name under that category should display in another option field

Upvotes: 0

Views: 1340

Answers (1)

shubham singh
shubham singh

Reputation: 400

INSTEAD of using (click)="onSelect(category)" in category select option use (change) = "onSelect(category)". so onSelect will call on change of category. use following.

       <select data-placeholder="All Categories" class="category" value="category.category.categoryName" (change)="onSelect($event.target.value)">
          <option  selected="selected" style="display:none">Select Category</option>
          <option class="select" 
          *ngFor="let category of categories;let i = index" value="{{category.categoryId}}" (click) = categoryIndex = i> 
           {{category.categoryName}}</option>
       </select>

Define categoryIndex:any in component and onSelect method will be:

onSelect(value){
    selected.categoryServicemodel = this.yourResponseData.[categoryIndex];
}

https://stackblitz.com/edit/angular-swvxny?file=src/app/app.component.ts

Upvotes: 3

Related Questions