Breaking News: Grepper is joining You.com. Read the official announcement!

angular mat select multiple select all

JBTheOneAndOnly answered on March 24, 2022 Popularity 10/10 Helpfulness 4/10

answer angular mat select multiple select all

related multiple select option in angular

angular mat select multiple select all

Comment

import { Component, VERSION, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('select') select: MatSelect;

  allSelected=false;
   foods: any[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
  toggleAllSelection() {
    if (this.allSelected) {
      this.select.options.forEach((item: MatOption) => item.select());
    } else {
      this.select.options.forEach((item: MatOption) => item.deselect());
    }
  }
   optionClick() {
    let newStatus = true;
    this.select.options.forEach((item: MatOption) => {
      if (!item.selected) {
        newStatus = false;
      }
    });
    this.allSelected = newStatus;
  }
}

.select-all{
  margin: 5px 17px;
} 

<mat-form-field>
  <mat-label>Favorite food</mat-label>
  <mat-select  #select multiple>
    <div class="select-all">
        <mat-checkbox [(ngModel)]="allSelected"
                        [ngModelOptions]="{standalone: true}"
                        (change)="toggleAllSelection()">Select All</mat-checkbox>
    </div>
    <mat-option (click)="optionClick()" *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: angular javascript mat-select multiple-select

Link to this answer
Share Copy Link

Contributed on Mar 24 2022

JBTheOneAndOnly

0 Answers Avg Quality 2/10

Closely Related Answers

multiple select option in angular

Comment

npm install --save @ng-select/ng-select

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: angular

Link to this answer
Share Copy Link

Contributed on Feb 25 2023

Ayush Bais

0 Answers Avg Quality 2/10

angular mat select multiple select all

Contents

More Related Answers

angular mat select multiple select all

Closely Related Answers

multiple select option in angular

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.