Tips for displaying an element for each item chosen in a multi-select box

Question

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox.

The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just keeps adding instead of removing.

My assumption is that I need to set a property like "deselect" or something similar, but I am not entirely sure. Could someone please assist me with this?

HTML:

<mat-select [formControl]="person" required>
    <mat-option>--</mat-option>
    <mat-option *ngFor="let person of person" [value]="person" (click)="getPerson()">
      {{person.name}}
    </mat-option>
</mat-select>

<div *ngFor="let person of personsArray">
    <div class="card"  >
        <div class="card-body dl-card-body-no-padding-bottom" >  
            //element to render
        </div>
    </div>

TS:

getPerson(){
   this.personsArray.push(this.form.controls.person.value)
}

javascript angular typescript angular-material

Answer 1

Answer №1

Ensure that the HTML for your mat-select includes the multiple attribute.

Additionally, ensure that you use distinct array names to store items from the source array and the selected array to avoid confusion in the select template.

To pass data into the selection handler, make sure to follow the updated HTML snippet below:

<mat-select [formControl]="person" required multiple>
  <mat-option>--</mat-option>
  <mat-option
    *ngFor="let individual of personsArray"
    [value]="individual"
    (click)="getPerson(individual)"
  >
    {{ individual.name }}
  </mat-option>
</mat-select>

In your component code, define separate arrays for the source array and selected items:

form: any;
person = new FormControl('');
personsArray: Person[] = [
    { name: 'alice' },
    { name: 'dan' },
    { name: 'gary' },
];
selectedPersonsArray: Person[] = [];

constructor() {
    this.form = new FormGroup({
      person: new FormControl(''),
    });
}

The selection handler should handle adding or removing items based on their existence in the select items array:

getPerson(value: Person) {
  console.log('selected person = ' + value.name);
  const person: Person = this.selectedPersonsArray.find(
    (p) => p.name === value.name
  );
  console.log('sel person=' + person?.name);
  if (!person) this.selectedPersonsArray.push(value);
  if (person?.name)
    this.selectedPersonsArray = this.selectedPersonsArray.filter(
      (p) => p.name !== value.name
    );
}

The Person interface defines the structure of the person object as follows:

export interface Person {
    name: string;
}

With these adjustments, your multi-selection dropdown list will properly display selected and un-selected items.

Answer 2

Ensure that the HTML for your mat-select includes the multiple attribute.

Additionally, ensure that you use distinct array names to store items from the source array and the selected array to avoid confusion in the select template.

To pass data into the selection handler, make sure to follow the updated HTML snippet below:

<mat-select [formControl]="person" required multiple>
  <mat-option>--</mat-option>
  <mat-option
    *ngFor="let individual of personsArray"
    [value]="individual"
    (click)="getPerson(individual)"
  >
    {{ individual.name }}
  </mat-option>
</mat-select>

In your component code, define separate arrays for the source array and selected items:

form: any;
person = new FormControl('');
personsArray: Person[] = [
    { name: 'alice' },
    { name: 'dan' },
    { name: 'gary' },
];
selectedPersonsArray: Person[] = [];

constructor() {
    this.form = new FormGroup({
      person: new FormControl(''),
    });
}

The selection handler should handle adding or removing items based on their existence in the select items array:

getPerson(value: Person) {
  console.log('selected person = ' + value.name);
  const person: Person = this.selectedPersonsArray.find(
    (p) => p.name === value.name
  );
  console.log('sel person=' + person?.name);
  if (!person) this.selectedPersonsArray.push(value);
  if (person?.name)
    this.selectedPersonsArray = this.selectedPersonsArray.filter(
      (p) => p.name !== value.name
    );
}

The Person interface defines the structure of the person object as follows:

export interface Person {
    name: string;
}

With these adjustments, your multi-selection dropdown list will properly display selected and un-selected items.

Tips for displaying an element for each item chosen in a multi-select box

Answer №1

Similar questions

Enclose this within Stencil.js components

Guide to creating a Javascript API wrapper

Alert: Mouse Exiting Window - Moodle Prompt

End the div element upon completion of the Vimeo video

What are the steps to update data using Angular?

Scrollbar width does not expand when hovered over

The PointCloud vertices in Three.js consistently provide a position of (0,0,0)

Tips for preventing the ExpressionChangedAfterItHasBeenCheckedError while utilizing [(ngModel)] with a textarea element

execute action once element has finished loading - angular

Is it possible to display two separate pieces of content in two separate divs simultaneously?

Tips for testing validation messages in Angular template-driven forms

Creating a TypeScript type that supports a flexible number of generic parameters

The Slice method is malfunctioning after the array has been filtered

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

Basic HTML Audio Player Featuring Several Customizable Variables

Discovering the most concise string within the array

Press the delete button located on the child component to trigger an action in the

Unable to Retrieve Data When Using ASP.NET MVC with Angular

Implementing an object as a filter in an NG-repeat function

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?