Redux and mat-selection-list in Angular

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.

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/[email protected] --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 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Why you should NEVER use Redux with Angular

While Redux solved a lot of problems with React, it’s use case doesn’t apply to Angular. Why?

Understanding of ngRx with Redux in Angular

In this post is useful for you to get the basic understanding of ngrx with redux after reading this post and you will start using it in your application

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials