Pfthb

I am trying to create a dropdown filter in angular material. Here is the array for my dropdown options

 public intensities = ['All',1,2,3,4,5]

Here is the html for the mat-select field.

 <mat-form-field>
 <mat-select placeholder="Choose Intensity" [(ngModel)]="selectedIntensity" (selectionChange)="onIntensityChange()">
 <mat-option *ngFor="let intensity of intensities" [value]="intensity">
 intensity
 </mat-option>
 </mat-select>
 </mat-form-field>

 <div class="flex-wrap" style="display: inline-block; padding: 5px 0 5px 20px;">
 <span style="font-weight:bold;">Show Shoppers With: </span>
 <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutPhone" (change)="filterVisibleShoppers()">Phone
 <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutEmail" (change)="filterVisibleShoppers()">Email
 <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutAddress" (change)="filterVisibleShoppers()">Address
 <input style="margin-left: 10px; margin-right: 5px;" type="checkbox" [(ngModel)]="hiddenWithoutTradeIn" (change)="filterVisibleShoppers()">Trade In
 </div>

I am trying to write a function 'onIntensityChange()' that displays the correct choices based on the user selection. I also have a filter that works with a checkbox. I'd like to be able to filter based on both selections(dropdown and checkbox) Here is the typescript file.

 @Component(
 templateUrl: 'daily-active-shopper.screen.html',
 )

 export class DailyActiveShoppersScreen {

 public selectedDate: Date;
 public maxDate: Date = new Date();
 public count = 0;
 public customers;
 public loading: boolean;

 public hiddenWithoutEmail: boolean;
 public hiddenWithoutPhone: boolean;
 public hiddenWithoutAddress: boolean;
 public hiddenWithoutTradeIn: boolean;

 _dealerId: number;

 activeShopperDay: DailyActiveShopperDay;
 visibleActiveShoppers: DailyActiveShopper;

 shopperDetailsVisible = true;
 shopperErrorMessage: string;

 public intensities = ['All',1,2,3,4,5]
 public selectedIntensity: any; 

 filterVisibleShoppers() 
 let shoppers = this.activeShopperDay.shoppers;
 if (this.hiddenWithoutAddress) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.state !== null;
 );
 
 if (this.hiddenWithoutPhone) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.phone !== null;
 );
 
 if (this.hiddenWithoutEmail) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.email !== null;
 );
 
 if (this.hiddenWithoutTradeIn) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.currentVehicle;
 );
 
 this.visibleActiveShoppers = shoppers;
 

 onIntensityChange() 
 console.log(this.selectedIntensity);
 let shoppers = this.activeShopperDay.shoppers;
 if(this.selectedIntensity === 'All') 
 shoppers = shoppers.filter((shopper) => 
 return this.visibleActiveShoppers = shoppers;
 )
 
 if(this.selectedIntensity === 1) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.intensity === this.selectedIntensity
 )
 
 if(this.selectedIntensity === 2) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.intensity === this.selectedIntensity
 )

 if(this.selectedIntensity === 3) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.intensity === this.selectedIntensity
 )
 
 if(this.selectedIntensity === 4) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.intensity === this.selectedIntensity
 )
 
 if(this.selectedIntensity === 5) 
 shoppers = shoppers.filter((shopper) => 
 return shopper.intensity === this.selectedIntensity
 )
 

 if(this.visibleActiveShoppers.length < 1) 
 console.log("None found for this intensity")
 
 this.visibleActiveShoppers = shoppers;
 

I'm looking for a proper way to implement this. Basically allowing the user to filter based on intensity and the four radio buttons.