Angular Material: How to refresh a drop-down list after a certain condition?

Question

I have a dropdown that I want to refresh the value, more exactly , I have two language and for each of them I have those elements [name-for English, and namecz for Czech], and if the value is "English" for English language for Czech language will be Czech , so far I have managed to show the list in each language even to select the right value , my problem is that if I change the language the selected value remains the same, doesn't change.

This is a similar example of what I want to get. https://stackblitz.com/edit/angular-jfetuh?file=app%2Fselect-value-binding-example.html

this is my payload :

[{id: 19, name: "Travel Recreation and Leisure", nameCZ: "test19"},…]
0: {id: 19, name: "Travel Recreation and Leisure", nameCZ: "test19"}
1: {id: 20, name: "Wholesale and Distribution", nameCZ: "test20"}
2: {id: 1, name: "Agriculture and Mining", nameCZ: "test1", description: "hello"}
3: {id: 2, name: "Business Services", nameCZ: "test2"}
4: {id: 3, name: "Computer and Electronics", nameCZ: "test3"}
5: {id: 4, name: "Consumer Services", nameCZ: "test4"}
6: {id: 5, name: "Education", nameCZ: "test5"}
7: {id: 6, name: "Energy and Utilities", nameCZ: "test 6"}
8: {id: 7, name: "Financial Services", nameCZ: "test 7"}
9: {id: 8, name: "Government", nameCZ: "test 8"}
10: {id: 9, name: "Health, Pharmaceuticals, and Biotech", nameCZ: "test9"}
11: {id: 10, name: "Manufacturing", nameCZ: "test10"}
12: {id: 11, name: "Media and Entertainment", nameCZ: "test11"}
13: {id: 12, name: "Non-profit", nameCZ: "test12"}
14: {id: 13, name: "Other", nameCZ: "test13"}
15: {id: 14, name: "Real Estate and Construction", nameCZ: "test14"}
16: {id: 15, name: "Retail", nameCZ: "test15"}
17: {id: 16, name: "Software and Internet", nameCZ: "test16"}
18: {id: 17, name: "Telecommunications", nameCZ: "test17"}
19: {id: 18, name: "Transportation and Storage", nameCZ: "test18"}

expected result: 19: {id: 18, name: "Transportation and Storage", nameCZ: "test18"} if the language is english and we have the selected value "Transportation and Storage" , and if i change the language i want the the seletced value be somehow translated/selected "test18"

At HTML i have :

<div class="field-box">

      <mat-form-field formGroupName="industry" *ngIf="language">
        <input type="text" placeholder="Search for Industries " aria-label="Number" matInput
          formControlName="searchIndustriesInput" [matAutocomplete]="industryAutoComplete">
        <mat-autocomplete #industryAutoComplete="matAutocomplete" [displayWith]="displayIndustries.bind(this)"
          (optionSelected)="industrySelected($event)">
          <div *ngIf="showCurrentLang">
            <mat-option *ngFor="let item of filteredIndustries | async" [value]="item">
              {{item.name}}
            </mat-option>
          </div>
          <div *ngIf="!showCurrentLang">
            <mat-option *ngFor="let item of filteredIndustries | async" [value]="item">
              {{item.nameCZ}}
            </mat-option>
          </div>
        </mat-autocomplete>
        <div
          *ngIf="industryForm.controls.id.invalid && (industryForm.controls.id.dirty || industryForm.controls.id.touched)"
          class="alert alert-danger">
          <mat-error *ngIf="industryForm.controls.id.errors.required">Must fill this field</mat-error>
        </div>
      </mat-form-field>
    </div>
  </div>

and at TS I have

export class CustomerQuestionnaireComponent implements OnInit {
  selectedValueEmployeeValue: string;
  selectedValueIndustryValue: string;
  selectedValueLanguageValue: string;
  selectedValueAppsValue: string;
  show: boolean;
  showCurrentLang: boolean;
  private language: string;
  afterDisplayIndustries: boolean;
  filteredIndustries: Observable<IIndustry[]>;
  selectedApps: IAppIntegratedApp[] = [];

  @ViewChildren(MatChip) children: QueryList<MatChip>;

  form: FormGroup;

  @Input() isLoading: boolean;
  @Input() industries: IIndustry[];
  @Input() errMsg: string;
  @Input() updateMsg: string;
  @Input() customerPreference: CustomerPreference;
  @Input() avaliableLanguages: ILanguage[];
  @Input() filteredApps: IAppIntegratedApp[];

  @Output() searchApps: EventEmitter<string> = new EventEmitter<string>();

  @ViewChild('auto') matAutocomplete: MatAutocomplete;
  @ViewChild('searchAppInput') searchAppInput: ElementRef;

  companySizeValues: IDataSourceOne[] = [
    { key: 'INDIVIDUAL', value: 'Individual(1)' },
    { key: 'MICRO', value: 'Micro(2-9)' },
    { key: 'SMALL', value: 'Small(10-49)' },
    { key: 'MEDIUM', value: 'Medium-sized(49-249)' },
    { key: 'BIG', value: 'Big(250+)' },
  ];

  separatorKeysCodes: number[] = [ENTER, COMMA];

  constructor(private fb: FormBuilder, private langService: LangService ,
              private translate: TranslateService) {
    this.langService.currentLang.subscribe((lang) => {
      this.language = lang;
      if (this.language === 'en') {
        this.showCurrentLang = true ;
      } else {
        this.showCurrentLang = false ;
      }
      if (this.afterDisplayIndustries) {
        this.displayIndustries((<FormGroup>this.form.controls.industry).value.searchIndustriesInput);
        this.industrySelected();
      }
    });

  }
  get isFormReady() {
    return this.avaliableLanguages !== undefined;
  }

  ngOnInit() {
    this.buildForm();
    this.toggleOtherIndustryField();

    this.filteredIndustries = (<FormGroup>this.form.controls.industry).controls.searchIndustriesInput.valueChanges
      .pipe(
        startWith(''),
        map(value => this.filter(value)),
      );
  }

  private filter (value: string | IIndustry): IIndustry[] {
    if (this.language === 'en') {
      console.log(this.language);
      if (value && (<IIndustry>value).name) {
        return this.industries;
      }

      const filterValue = (<string>value).toLowerCase();

      return this.industries.filter(option => option.name.toLowerCase().includes(filterValue));
    }

    if (value && (<IIndustry>value).nameCZ) {
      return this.industries;
    }

    const filterValue = (<string>value).toLowerCase();

    return this.industries.filter(option => option.nameCZ.toLowerCase().includes(filterValue));

  }

  displayIndustries (industry: IIndustry) {
    if  (industry) {
      this.afterDisplayIndustries = true;
      console.log((this.language === 'en') ? industry.name : industry.nameCZ);
      return (this.language === 'en') ? industry.name : industry.nameCZ;
    }
    return undefined;
  }

  buildForm(): void {
    this.form = this.fb.group({
      industry: this.fb.group({
        searchIndustriesInput: this.customerPreference.industry,
        id: [this.customerPreference.industry.id, [
          Validators.required,
        ]],
      });



  }





  get industryForm(): FormGroup {
    return this.f.industry as FormGroup;
  }



  get f() {
    return this.form.controls;
  }

  industrySelected(e?) {
    const industryForm = <FormGroup>this.form.controls.industry;
    industryForm.controls.id.setValue(industryForm.controls.searchIndustriesInput.value.id);
    this.toggleOtherIndustryField();
  }


}

is there anyone how can help me please .. thanks in advance.

Answer 1

A simple *ngIf will do the job for you, remember that when we are selecting an option, we are selecting an item in the array - english or czech langauge description are children of a particular item; Tto show the complete demo, i inserted a radio button at the top to toggle between the 2 languages...

relevant HTML:

<mat-radio-group aria-label="Select an option" [(ngModel)]="selectedLanguage">
    <mat-radio-button value="english">English</mat-radio-button>
    <mat-radio-button value="czech">Czech</mat-radio-button>
</mat-radio-group>
<br/>
<p> selected language: {{selectedLanguage}} </p>
<br/>

<mat-form-field>
  <mat-label>select option</mat-label>
  <mat-select [formControl]="langSelect">
    <mat-option *ngFor="let item of dualArray" [(value)]="item">
      <!-- {{item.id}} -->
      <ng-container *ngIf="selectedLanguage == 'english'">
        {{item.name}}
      </ng-container>
      <ng-container *ngIf="selectedLanguage == 'czech'">
        {{item.nameCZ}}
      </ng-container>
    </mat-option>
  </mat-select>
</mat-form-field>
<p>You selected:
  <ng-container *ngIf="selectedLanguage == 'english'">
    {{langSelect.value?.name}}
  </ng-container>
  <ng-container *ngIf="selectedLanguage == 'czech'">
    {{langSelect.value?.nameCZ}}
  </ng-container>
</p>

relevant TS:

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

/** @title Select with 2-way value binding */
@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
})
export class SelectValueBindingExample {
  selected = '';
  selectedLanguage = 'english';
  langSelect = new FormControl('', []);
  dualArray = [
    { id: 19, name: "Travel Recreation and Leisure", nameCZ: "test19" }
    , { id: 20, name: "Wholesale and Distribution", nameCZ: "test20" }
    , { id: 1, name: "Agriculture and Mining", nameCZ: "test1", description: "hello" }
    , { id: 2, name: "Business Services", nameCZ: "test2" }
    , { id: 3, name: "Computer and Electronics", nameCZ: "test3" }
    , { id: 4, name: "Consumer Services", nameCZ: "test4" }
    , { id: 5, name: "Education", nameCZ: "test5" }
    , { id: 6, name: "Energy and Utilities", nameCZ: "test 6" }
    , { id: 7, name: "Financial Services", nameCZ: "test 7" }
    , { id: 8, name: "Government", nameCZ: "test 8" }
    , { id: 9, name: "Health, Pharmaceuticals, and Biotech", nameCZ: "test9" }
    , { id: 10, name: "Manufacturing", nameCZ: "test10" }
    , { id: 11, name: "Media and Entertainment", nameCZ: "test11" }
    , { id: 12, name: "Non-profit", nameCZ: "test12" }
    , { id: 13, name: "Other", nameCZ: "test13" }
    , { id: 14, name: "Real Estate and Construction", nameCZ: "test14" }
    , { id: 15, name: "Retail", nameCZ: "test15" }
    , { id: 16, name: "Software and Internet", nameCZ: "test16" }
    , { id: 17, name: "Telecommunications", nameCZ: "test17" }
    , { id: 18, name: "Transportation and Storage", nameCZ: "test18" }
  ];
}

complete working stackblitz here