CODEWITHSUNDEEP
angulardrop-down-menudropdown
Jayant Kaushik
Jayant Kaushik

Reputation: 213

How to hide specific option in the drop-down values while combining two drop-downs in Angular

I have a dropdown named country, which has 3 values "India,china, australia" and I have a dropdown named position which has 3 values " application developer ,application developer- WW, application developer -GEO".

I want to show all 3 values of the second dropdown when country is other than India.

for India it should only show application developer

<mat-form-field class="no-bord">
                                            <mat-select [ngClass]="isValidCountry?'sb-push-unread':'sb-push-read'" id="country" tabindex="21" (ngModelChange)="onChangeCountry($event)" name="country_code" [(ngModel)]="requestData.country_code" class="form-control form-control-cust">
                                                <mat-option value="" selected>Select Physical Country</mat-option>
                                                <mat-option *ngFor="let ele of geocountry" [value]="ele.country_id">{{ele.country_name}}</mat-option>
                                            </mat-select>
                                        </mat-form-field>


    <mat-form-field class="no-bord">
                                            <mat-select [ngClass]="isValidjobrole?'sb-push-unread':'sb-push-read'" #offr="ngModel" tabindex="17" class="form-control form-control-cust offering" (ngModelChange)="onChangeJobrole($event)" name="job_role" [(ngModel)]="requestData.job_role">
                                                <mat-option value="" selected>Select Job Role</mat-option>
                                                <mat-option *ngFor="let ele of jobrole" [value]="ele.JOB_ROLE_ID">{{ele.JOB_ROLE_NAME}}</mat-option>
                                            </mat-select>
                                        </mat-form-field>

my ts file is below:

onChangeGeo(newgeoindex) {

this.requestData.country_code = '';
this.requestData.msc_location = '';
this.nocountry = false;
this.geocountry = [];
this.msccountry = [];
this.msccity = [];
this.isothercity = false;
this.maincity = " ";
this.othercitydata = " ";
for (let geo of this.masterData['geo_country']) {
  if (geo.geo_id == newgeoindex) {
    this.requestData.geo = geo.geo_name;
    this.requestData.geo_code = geo.geo_code;
    this.geocountry = geo.countries;
  }
}

}

Upvotes: 0

Views: 759

Answers (2)

Gaurang Dhorda
Gaurang Dhorda

Reputation: 3387

You can find working example here 1. (using RXJS way) StackBlitz Link

You can find working example here 2. (using simple component way) StackBlitz Link

You can find working example here 3. (using pipe) StackBlitz Link

Above are three different way of doing as per your requirement.

app.component.html

<select (change)="onSelected($event)">
    <option>select </option>
    <option *ngFor="let country of countries" [value]="country">{{country}} </option>
</select>
<hr>
<select>
   <option> select</option>
   <option *ngFor="let dev of developers"> {{dev}} </option>
</select>

app.component.ts

export class AppComponent  {
   countries = ['India', 'China', 'Australia', 'USA'];
   developers = ["application developer" ,"application developer- WW", "application developer -GEO"];
   developersCopy = ["application developer" ,"application developer- WW", "application developer -GEO"];
   onSelected(country){
      if (country.target.value === 'India'){
         this.developers = this.developers.filter(val => val.toString() === 'application developer')
   }else{
     this.developers = this.developersCopy;
   }
  }

This is very quick, solution for your reference, since you are not going to tell about your approach of doing solution. There are numerous ways to improve this solution.

Upvotes: 1

Jayant Kaushik
Jayant Kaushik

Reputation: 213

one more way

enter link description here appcomponent.html

<select (change)="onSelected($event)">
  <option value="select"> select </option>
  <option *ngFor="let country of countries" [value]="country.id">{{country.countryName}} </option>
</select>
<hr>
<select>
  <option> select</option>
  <option *ngFor="let dev of developers"  > {{dev.devName}} </option>
</select>

app component.ts

import { Component, ChangeDetectionStrategy } from '@angular/core';
import {countries, developers} from './model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection : ChangeDetectionStrategy.OnPush
})
export class AppComponent  {
  constructor(){}
  countries = countries as Array <any>;
  developers : any ;
  onSelected(country){

      return (+country.target.value !== 1 || country.target.value === 'select') ? this.developers = this.developers.filter(val => val.id === 1) : this.developers = developers;
  }
}

Upvotes: 0

Related Questions