0
229
ViewsHow 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){ }
·
Juan Pablo Isaza
1 answers
Answer question0
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)
}
})
·
Juan Pablo Isaza
Report
Answer question