Question

0

85

Views

How check for changes in select menu in Angular?

How do know using openedChange that when you close or open the mat select panel it will show if there is an item on the select box that was check or uncheck.

Right now I can only detect if it is open or close , I wanna to detect that when I close it if there is any activity or select items on the select menu. Thanks.

I want to check if there are any changes.

#html code

 <mat-form-field class="job-filter" appearance="fill">
          <mat-select #select [formControl]="marketDropdownMultiCtrl" placeholder="Market" [multiple]="true" #marketDropdownMultiSelect (openedChange)="changeFilterEvent($event,select)">
              <mat-option>
                <ngx-mat-select-search 
                [showToggleAllCheckbox]="true" 
                accesskey="" 
                placeholderLabel="Search Market filter" 
                noEntriesFoundLabel="'No results found'" 
                (toggleAll)="toggleSelectAllMarket($event)" 
                [toogleAllCheckboxTooltipPosition]="'above'"
                [toggleAllCheckboxChecked]="marketDropdownMultiCtrl?.value?.length === marketDropdownSize" 
                [toggleAllCheckboxIndeterminate]="marketDropdownMultiCtrl?.value?.length > 0 && marketDropdownMultiCtrl?.value?.length < marketDropdownSize"
                [toggleAllCheckboxTooltipMessage]="'Select / Deselect all Market filters'" 
                [formControl]="marketDropdownMultiFilterCtrl">
              </ngx-mat-select-search>
              </mat-option>
              <mat-option *ngFor="let market of filteredMarketListMulti | async" [value]="market">
                  {{market.description}}
              </mat-option>
          </mat-select>
        </mat-form-field>

#tscode

changeFilterEvent(opened:boolean,element:any){ }

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-06-25T20:10:06.168Z

Before open make a copy of marketDropdownMultiCtrl.value -

this.oldValue=marketDropdownMultiCtrl.value

After close compare values

if (marketDropdownMultiCtrl.value!=this.oldValues)
        ...do something..
})

if you want check any change in the same time you check/uncheck any value you can also subscribe to this.marketDropdownMultiCtrl.valueChanges using pipe pairwise

ngOnInit()
{
   this.marketDropdownMultiCtrl=new FormControl(null);
 
   this.marketDropdownMultiCtrl.valueChanges.pipe(
      //it's necesary send a first value
      startWith(this.marketDropdownMultiCtrl.value), 
      pairwise())  //the pairwise make the "magic"
       .subscribe(([old,value])=>{
          if (old!=value)
          {
              console.log("I change from "+old+" to "+value)
          }
      })