Looking for a way to detect changes in a select menu using Angular?

How can I determine with the openedChange event if there have been any changes to the select box items when the mat select panel is closed or opened?

Currently, I am only able to detect if the panel is open or closed. I would like to be able to detect any activity or selected items in the select menu when it is closed. Thank you.

I need to check for any modifications in the selection.

#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>

https://i.stack.imgur.com/FYGkA.png

#tscode

changeFilterEvent(opened:boolean,element:any){ }
javascriptangulartypescriptangular-material

Answer №1

Before opening, be sure to create a backup of the current marketDropdownMultiCtrl.value -

this.oldValue = marketDropdownMultiCtrl.value

When closing, compare the values:

if (marketDropdownMultiCtrl.value != this.oldValues)
        ...take some action...
})

If you want to monitor any changes in real time while checking/unchecking a value, you can also subscribe to this.marketDropdownMultiCtrl.valueChanges using the pipe pairwise:

ngOnInit()
{
   this.marketDropdownMultiCtrl = new FormControl(null);
 
   this.marketDropdownMultiCtrl.valueChanges.pipe(
      //it's necessary to send the initial value
      startWith(this.marketDropdownMultiCtrl.value), 
      pairwise())  //the pairwise function makes the magic happen
       .subscribe(([old, value]) => {
          if (old != value)
          {
              console.log("I changed from " + old + " to " + value)
          }
      })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

ReactJS Typescript Material UI Modular Dialog Component

Hello, I need help with creating a Reusable Material UI Modal Dialog component. It's supposed to show up whenever I click the button on any component, but for some reason, it's not displaying. Here's the code snippet: *********************TH ...

reactjstypescriptmaterial-ui

Issue R10 (Start-up delay) -> Failure of web application to connect to $PORT in the given 60 seconds after being launched (Angular)

I am currently in the process of building an Angular 7 application and attempting to connect it to Heroku (I am fairly new to using Heroku). Upon trying to run the application on Heroku, I encountered the following error: https://i.stack.imgur.com/ySmJw.p ...

angularheroku

Oops! There was an error: Unable to find a solution for all the parameters needed by CountdownComponent: (?)

I'm currently working on creating a simple countdown component for my app but I keep encountering an error when I try to run it using ng serve. I would really appreciate some assistance as I am stuck. app.module.ts import { BrowserModule } from &apo ...

javascriptangulartypescript

JavaScript refuses to execute

I am facing an issue with a static page that I am using. The page consists of HTML, CSS, and JavaScript files. I came across this design on a website (http://codepen.io/eode9/pen/wyaDr) and decided to replicate it by merging the files into one HTML page. H ...

javascriptjquerylinker

implementing jqBarGraph on my webpage

Hey there! I have been trying to add a graph to my HTML page for quite some time now. After doing some research, I discovered that using the jqBarGraph plug-in makes it easier to create the desired graph. Below you will find the code that I have on my webp ...

javascriptjqueryhtml

Is there a way to automatically change specific characters as a user types in an input field?

I'm facing an issue with replacing some characters dynamically. The goal is to ensure that user-input text is URL-friendly for constructing a URL: function slugify(string) { const a = "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïí ...

javascriptregexreactjsreduxecmascript-6

When using *ngFor with AngularFireList, an error is thrown indicating an invalid

I'm struggling to grasp why I'm getting an invalid pipe argument error with *ngFor when using async. Without async, I'm told that NgFor only supports binding to iterables like Arrays. Oddly enough, the same code works fine on another page bu ...

angularfirebaseionic-frameworkionic3ngfor

Issue with Backbone collection not being updated despite making a JSONP request

Recently, I delved into the world of Backbone.js and currently, I am immersed in developing an app using Brunch that makes a JSONP request to an external API for populating my collection and models. Despite following guidance from previous posts (here and ...

javascriptajaxbackbone.jsjsonpbrunch

I am looking to customize the mask input in my angular 7 application so that it allows either a "-" or a digit as the first character, with all subsequent characters being digits. How can I make this modification?

Within my Angular 7 application, I am working on a method that masks user input. Currently, the method restricts users from inputting anything other than digits. However, I need to modify it so that users can input either a "-" or a digit as the first char ...

regexangularangular7masking

Alphabetic divider for organizing lists in Ionic

I am currently working with a list in ionic that is fetched from a controller and stored in localStorage. My goal is to add alphabetic dividers to the list, but I am facing some confusion on how to achieve this. Here is a snippet of the code: app.js $ion ...

javascripthtmlangularjsionic-framework

Retrieving the current day integer from a fullcalendar rendering in JavaScript and utilizing it as an array key

I am currently working on rendering a full calendar and I would like each cell to be displayed in a different color based on an array that contains color values for each day of the month. The array is retrieved in JSON format. Here is an example JSON arra ...

javascriptphparraysjsonfullcalendar

Unable to align text within a DIV using CSS

Recently, I started learning jQuery and building my own website. You can find my project on JSFIDDLE. The issue I'm facing is that when hovering over a new div, the text extends beyond the borders of that div instead of staying within it. I've sp ...

javascriptjqueryhtmlcss

Dynamic Styling in Angular 2/4: A Modern Approach

Can someone help me with Angular 2/4 syntax for this code snippet? $('nav ul li a').click(() => { $(this).closest('li').addClass('active'); }); ...

jqueryangular

Make Ionic 2 Navbar exclusively utilize setRoot() instead of pop()

When navigating to a different page, the ion-navbar component automatically includes a back button that uses the pop() method to return to the previous page. Is there a way to modify this behavior so that it utilizes the setRoot() method instead of pop(), ...

angulartypescriptionic-frameworkionic2

Vue3 - Utilizing a method to dynamically alter an input property

Currently, I am in the process of developing a Vue application that incorporates a map feature. The main functionality involves determining whether a given position on the map is over water or land. If the position is over water, I want to iterate through ...

javascriptvue.jsvue-componentvuejs3

JS custom scrollbar thumb size issues in relation to the scroll width of the element

I recently implemented a custom scrollbar for a component on my website. To determine the length of the scrollbar thumb, I use the formula viewportWidth / element.scrollWidth;. This provides me with a percentage value that I then apply to the thumb elemen ...

javascripthtmlcssreactjs

Encountering a Typescript error when trying to invoke a redux action

I have created a redux action to show an alert message export const showAlertConfirm = (msg) => (dispatch) => { dispatch({ type: SHOW_ALERT_CONFIRM, payload: { title: msg.title, body: msg.body, ...

javascriptreactjstypescript

Detach an item from its parent once it has been added to an array

Currently, I am facing an issue with a form on my blog. The blog is represented as an object that contains multiple content objects within it. I seem to be experiencing some confusion because the reactivity of the content I add to the Array persists with t ...

javascriptarraysvue.jsvuejs3

Adding static files to your HTML page with node.js

This is not a question about using express.static() In my application, I have multiple pages that share the same JS and CSS dependencies. Instead of adding <script> or <link> tags to every single page, I'm looking for a way to include the ...

javascriptphphtmlcssnode.js

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml