CODEWITHSUNDEEP
angularangular-material
Rolando
Rolando

Reputation: 62634

How to select all?

As far as 'Multiple Selection' goes:

https://material.angular.io/components/select/overview

HTML

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

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

/** @title Select with multiple selection */
@Component({
  selector: 'select-multiple-example',
  templateUrl: 'select-multiple-example.html',
  styleUrls: ['select-multiple-example.css'],
})
export class SelectMultipleExample {
  toppings = new FormControl();

  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

Is there a way to 'precheck' the boxes like 'Extra cheese', 'Pepperoni'?

Upvotes: 0

Views: 668

Answers (2)

Patryk Gułaś
Patryk Gułaś

Reputation: 997

Just define your toppings with array of values you want to be checked at start:

toppings = new FormControl(['Extra cheese', 'Pepperoni']);

toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

Upvotes: 2

Alexandr2134
Alexandr2134

Reputation: 272

try this:

toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

toppings = new FormControl(this.toppingList);

Upvotes: 0

Related Questions