Skip to main content

Material Angular Multi-Select drop down|Mat CheckBox|Select All Multi-Select drop down

Material Angular Multi-Select drop down With Select All Check Box


Material Angular drop down as multi select with select all option using mat check box.


Here we go for the steps to achieve Material multi-Select drop down with select all checkbox (Mat Checkbox).

Material Angular Modules  Used : 


  • import {MatCheckboxModule} from '@angular/material/checkbox'; refer
  • import {MatSelectModule} from '@angular/material/select';refer
  • import {MatFormFieldModule} from '@angular/material/form-field'; refer


Step 1 : Import MatCheckboxModule,MatSelectModule and MatFormFieldModule from Material Angular on app.module.ts
Step 2: in required component.ts file add variables selectall as boolean, languages as formcontrol type variable and an array of data.
  selectall: boolean;
  languages = new FormControl();
  languagesList: string[] = ['English', 'Spanish', 'Russian', 'Arabic','Mandarin Chinese','Malay','Bengali'];
Step 3: Add a function selectalllang()  required component.ts.
selectalllang() {
 console.log('call',[this.selectall,this.languages]);
   if  (this.selectall === false) {
     this.languages = new FormControl();
     return;
   }else if (this.selectall === true) {
       this.languages = new FormControl();
       this.languages.setValue(this.languagesList);
   }
}
Step 4: In Components HTML Template   Add mat-checkbox, Assing ngModel to  selectall and handle the ngModelChange event with selectalllang
<mat-checkbox [(ngModel)]="selectall" (ngModelChange)="selectalllang()" >All</mat-checkbox> 
Step 5: In Components HTML Template add  mat-select , assign formcontrol to languages and mention multiple directives to enable multi-selection
<mat-form-field>
  <mat-select placeholder="Languagess" [formControl]="languages" multiple>
    <mat-option *ngFor="let language of languagesList" [value]="language">{{language}}</mat-option>
  </mat-select>
</mat-form-field>
Step 6: Run the project and See the output.




Code Action @ StackBlitz


Comments

Popular posts from this blog

Angular Material Table Dynamic Columns|Dynamic-columns-mat-table

Dynamic-Columns-Mat-Table

Here we have solution for dynamic Mat table columns

Step 1: Create column Definition Model class

export  class ColumnDefinition {
    columnDef: string;
    header: string;
    cell: any;
    constructor(_columnDef: string, _header: string, _cell: any) {
     this.columnDef = _columnDef;       this.header = _header; this.cell = _cell;
    }
  }Step 2: Add Mat-Table Defintion as below in Html Template 
<table mat-table [dataSource]="mattabledataSource" matSort class="mat-elevation-z8">
    <ng-container *ngFor="let col of displaycolumndefs" matColumnDef="{{col.columnDef}}" >
        <div   >
            <th mat-header-cell *matHeaderCellDef  mat-sort-header > {{col.header}}  </th>
            <td mat-cell *matCellDef="let element">{{ col.cell(element) }}</td>
        </div>
    </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColum…

Material Angular Table Column Header With Multi Selection,Material Angular Table Column Selection,Mat-Table

Material Angular Table Column Header With Multi-Selection| Material Angular Table Header Column Check Box 
Sometimes we need multi-selection in a single click & here we discussed. Knowledge required MatCheckboxModule-mat-checkbox,MaterialCheckBox Module MatTableModule- mat-table,MatTable Module TwoWayBinding Typescript array  Step 1: Modules to import  import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; import {MatCheckboxModule} from '@angular/material/checkbox'; Step 2: Have to define a class  type for two way binding with mattable
export interface people {
  name: string;
  Sno: number;
  canspeak: boolean;
  canwrite: boolean;
}
Step 3 : Create an array for the people type  const ELEMENT_DATA: people[] = [
  {Sno: 1, name: 'John', canspeak: false, canwrite: false},
  {Sno: 2, name: 'Miller', canspeak: false, canwrite: false},
  {Sno: 3, name: 'Peter…