Angular Tutorial: Redux and mat-selection-list

DZone 's Guide to

Angular Tutorial: Redux and mat-selection-list

In this post, we look at a couple pieces of code that can help Angular developers better understand the framework and working with TypeScript.

· Web Dev Zone ·
Free Resource

How to Install Redux Dev Tools in Angular 6

  1. Install Redux Dev Tools from the Chrom web store.

  2.  Install ngrx dev tools in your Angular project:

npm install @ngrx/store-devtools@6.1.0 --save


3.  Add the ngrx dev tools module to your project:

import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment'; // Angular CLI environemnt

  imports: [
    // Instrumentation must be imported after importing StoreModule (config is optional)
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production, // Restrict extension to log-only mode
export class AppModule {}

mat-selection-list for select all checkbox in Angular 6

HTML with inline tutorial: 

 <mat-selection-list formControlName="areasCtrl" role="list">
   <!-- add select all option here and add select all event -->
      <mat-list-option #areaSelectAll value="ALL" (click)="areaSelectAllEvent()" aria-label="select all">Select All</mat-list-option>
      <mat-list-option *ngFor="let area of areaArray" [value]="area.areaName" aria-label="{{area.areaFullName}}">

Component part (TypeScript code with tutorial notes given in the comments): 

select all event for select all option

areaSelectAllEvent is used to reset areasCtrl formcontrol with all the list of value
or with empty list of value

      let allList = this.getAreaValueFromList(this.areaArray);
      this.spForm.get('areasCtrl').setValue(allList, {emitEvent: false});
      this.selAreas = allList; 

value changes for area form contontrol

this.spForm.get('areasCtrl').valueChanges.subscribe(areas =>{

      //add feature for select all if selecte all is set, check other option will reset the select all
      let area = areas;
      if(area.includes('ALL') && area.length > 1  && area.length < this.areaArray.length+1){        

        const dif = _.difference(area,this.selAreas); //compare current value with previous value
          if(dif[0] !== 'ALL'){
            area.shift(); // remvoe all from array

angular 6, angular tutorial, redux dev tools, web dev

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}