Redux and mat-selection-list in Angular

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

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

@NgModule({
  imports: [
    StoreModule.forRoot(reducers),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      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}}">
        {{area.areaFullName}}
      </mat-list-option>
 </mat-selection-list>

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

*/
areaSelectAllEvent(){
    if(this.areaSelectAll.selected){
      let allList = this.getAreaValueFromList(this.areaArray);
         allList.unshift('ALL');
      console.log(allList);
      this.spForm.get('areasCtrl').setValue(allList, {emitEvent: false});
      this.selAreas = allList; 
  }else{
      this.spForm.get('areasCtrl').setValue([]);
  }
 }

/*
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
            this.spForm.get('areasCtrl').setValue(area);
          }         
      }

      this.selAreas=areas;
    })

#angular #redux