Concealing Dropdown Box Information Based on a Customized List in Angular

Question

Concealing Dropdown Box Information Based on a Customized List in Angular

Is there a way to remove an item from a dropdown list once it has been selected? For example, if I have a dropdown box with options 'Dog', 'Lion', and 'Cat', how can I make it so that once I select 'Dog', it will no longer show in the dropdown list? Is this achievable?

Here is the HTML code:

<mat-form-field class="full-width" floatLabel="always" appearance="outline">
  <mat-label>Choose Animal</mat-label>
  <mat-select formControlName="animal">
    <mat-option *ngFor="let items of animal" [value]="items.id">
      {{items.animal}}
    </mat-option>
  </mat-select>
</mat-form-field>

And here is the TS code:

ngOninit() {
  this.getList()
}

getList() {
  this.animalSVC.getListOfAnimal().subscribe((response: AnimalDTO) => {
    this.animalObj = response;
    this.animalDS = this.animalObj.items
  })
}

So, for example, if I select 'Lion' from the list, it should not be available for selection again in the dropdown box.

angular typescript rxjs

Answer 1

Answer №1

If you are dealing with a single selection, you can utilize the following code:

  <mat-option *ngFor="let food of foods"
    [hidden]="food.value==form.get('food')?.value"
    [value]="food.value"
  >
    {{food.viewValue}}
  </mat-option>

You will also need to add the corresponding .css styles:

  mat-option[hidden]{
    display:none
  }

However, if the selection allows for multiple choices, you need to provide users with the option to deselect items. This can be achieved by monitoring the user's selection status:

To handle this functionality, we create a variable that updates based on the mat-select's state changes and the deselection of options:

  oldValue:any[]=[]

  <mat-select formControlName="foodMultiple" multiple 
     (openedChange)="oldValue=form.get('foodMultiple')?.value||[]"
     >
    <mat-option #option *ngFor="let food of foods"
      (onSelectionChange)="!option.selected && unSelect(option.value)"
      [hidden]="(form.get('foodMultiple')?.value||[]).indexOf(food.value)>=0 
                && oldValue.indexOf(food.value)<0"
      [value]="food.value"
    >
      {{food.viewValue}}
    </mat-option>
  </mat-select>

We employ a template reference variable, #option, to determine the selection status through option.selected and pass this information to the unSelect function:

The syntax (event)="condition && function()" ensures that the function is only executed if the specified condition is met.

  unSelect(value:string)
  {
      this.oldValue=this.oldValue.filter(x=>x!=value)
  }

By implementing this, deselected options will be removed from the list upon unselection.

Additional Note: If you prefer, you can skip checking for deselected options, but they will remain visible if reselected.

Additional Note 2: Alternatively, you can handle visibility by adding a class dynamically using [class.nodisplay]=... and corresponding CSS mat-option.nodisplay rules.

For a demonstration, you can refer to this stackblitz example

Answer 2

If you are dealing with a single selection, you can utilize the following code:

  <mat-option *ngFor="let food of foods"
    [hidden]="food.value==form.get('food')?.value"
    [value]="food.value"
  >
    {{food.viewValue}}
  </mat-option>

You will also need to add the corresponding .css styles:

  mat-option[hidden]{
    display:none
  }

However, if the selection allows for multiple choices, you need to provide users with the option to deselect items. This can be achieved by monitoring the user's selection status:

To handle this functionality, we create a variable that updates based on the mat-select's state changes and the deselection of options:

  oldValue:any[]=[]

  <mat-select formControlName="foodMultiple" multiple 
     (openedChange)="oldValue=form.get('foodMultiple')?.value||[]"
     >
    <mat-option #option *ngFor="let food of foods"
      (onSelectionChange)="!option.selected && unSelect(option.value)"
      [hidden]="(form.get('foodMultiple')?.value||[]).indexOf(food.value)>=0 
                && oldValue.indexOf(food.value)<0"
      [value]="food.value"
    >
      {{food.viewValue}}
    </mat-option>
  </mat-select>

We employ a template reference variable, #option, to determine the selection status through option.selected and pass this information to the unSelect function:

The syntax (event)="condition && function()" ensures that the function is only executed if the specified condition is met.

  unSelect(value:string)
  {
      this.oldValue=this.oldValue.filter(x=>x!=value)
  }

By implementing this, deselected options will be removed from the list upon unselection.

Additional Note: If you prefer, you can skip checking for deselected options, but they will remain visible if reselected.

Additional Note 2: Alternatively, you can handle visibility by adding a class dynamically using [class.nodisplay]=... and corresponding CSS mat-option.nodisplay rules.

For a demonstration, you can refer to this stackblitz example

Answer 3

Answer №2

To start, declare a global variable like animalSelectedId: number = null. Next, create a function that will be triggered on changes to store the selected animal ID. When looping through the array of animals, only display the items that do not match the animalSelectedId.

 <mat-form-field class="full-width" floatLabel="always" appearance="outline">
   <mat-label>Choose Animal</mat-label>
      <mat-select formControlName="animal" (selectionChange)="onChange($event)">
         <mat-option *ngFor="let items of animal" [value]="items.id">
            <div *ngIf="items.id !== animalSelectedId">
              {{items.animal}}
            </div>
         </mat-option>
      </mat-select>
 </mat-form-field>

animalSelectedId: number = null

public onChange(e: {value: number}): void {
  animalSelectedId = e.value;
}

Answer 4

To start, declare a global variable like animalSelectedId: number = null. Next, create a function that will be triggered on changes to store the selected animal ID. When looping through the array of animals, only display the items that do not match the animalSelectedId.

 <mat-form-field class="full-width" floatLabel="always" appearance="outline">
   <mat-label>Choose Animal</mat-label>
      <mat-select formControlName="animal" (selectionChange)="onChange($event)">
         <mat-option *ngFor="let items of animal" [value]="items.id">
            <div *ngIf="items.id !== animalSelectedId">
              {{items.animal}}
            </div>
         </mat-option>
      </mat-select>
 </mat-form-field>

animalSelectedId: number = null

public onChange(e: {value: number}): void {
  animalSelectedId = e.value;
}

Concealing Dropdown Box Information Based on a Customized List in Angular

Answer №1

Answer №2

Similar questions

Performing unit testing on a Vue component that relies on external dependencies

Exploring the nuances of checking lists in TypeScript

Tips for incorporating multiple services within a single Angular component

Error: Unable to access the property of an undefined variable in Angular 4

Observable not triggering Subject.next() as expected

Using Angular2 Pipes to display raw HTML content

Conditional Dependencies

I'm encountering difficulty trying to set up sweetalert2 in Angular

Utilizing the Double Mapping Feature in React with Typescript

Dynamic Angular routes with varying numbers of parameters

Array[object..] logical operators

Using {children} in NextJS & Typescript for layout components

Transmit live video feed captured by getUserMedia to a Node.js server and then forward it to the Google Cloud Platform speech API

Is the RouterModule exclusively necessary for route declarations?

Is it possible for me to employ T extends Contravariant<any> to effectively restrict a generic type to a union of Contravariants

Implementing automatic selection for MUI toggle buttons with dynamic data

A specialized <T> interface, now enhanced with additional functionalities

Upgrading Angular causes issues with fileReplacements not functioning properly for assets

Formik Fields with unique key properties

Enhance your Next.js routing by appending to a slug/url using the <Link> component