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){ }

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

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

Guide to sending JSON data to a server and retrieving it back using AJAX - a detailed breakdown of the

As I work on my project web page, I am exploring the use of JSON to facilitate the transfer of data between the user and the server. However, I find myself a bit puzzled about the sequence of steps involved in each JSON method. Here is my current understan ...

When querying, @TemplateRef performs distinctively compared to regular search behavior

Initially, this issue only arises in beta16; previous versions are functioning correctly. The @Query function also locates the template elements within descendant elements. For example, if a component is searching for Template elements within content; ex ...

"Ensuring Data Accuracy: Validating WordPress Fields with JavaScript

Can anyone provide assistance with this? I've been struggling for some time now. I am in need of a JavaScript code that can compare two fields in a contact form to ensure they match. For example, Phone Number and Phone Number Again. Both fields must ...

Shift attention away from AG-Grid

AG Grid is being used on a website and when a user clicks a cell, it becomes focused with a blue outline. I am looking to remove this focus when the user clicks on specific elements on the site, but I am unsure of how to achieve this. Is there a method or ...

"Embracing the power of multiple inheritance with Types

I am struggling with the concept of multiple inheritance in TypeScript. It doesn't make sense to overload a hierarchy with too much functionality. I have a base class and several branches in the hierarchy. However, I need to utilize mixins to isolate ...

Create a dynamic styled component with tags based on props

Looking to craft a dynamic tag using styled components, where the tag is passed in via props. Here's an example of the code: import * as React from 'react'; import styled from 'styled-components'; type ContainerProps = { chi ...

Issue encountered in node_modules/@ngrx/store/src/models.d.ts(58,58): TypeScript error TS2304 - Unable to locate identifier 'unknown'

I am currently exploring the implementation of the REDUX Pattern in my upcoming Angular project, but I am facing issues with importing the necessary libraries. ERROR in node_modules/@ngrx/store/src/models.d.ts(58,58): error TS2304: Cannot find name &apo ...

Concealing the TinyMce Toolbar upon initialization

After setting my content with tinymce, I want to make the toolbar readonly. To achieve this, I subscribed to the editor's init function like so: editor.on('init', () => { editor.setContent(this.value); if (this.disab ...

Guide on filtering FlatList Data in react native by selecting multiple categories from an array

User Interface Image I am looking to implement a filter functionality in the FlatList data based on top categories, where the filter button allows for multiple selections. The FlatList data is stored in the HotelData array, and the categories are also re ...

Using v-model in Vue, the first option has been chosen

Is there a way to set a default value for myselect when a user visits the site for the first time? I want the first option to be selected initially, but allow the user to change their choice if they prefer another option. Can this be achieved using v-model ...

What is the best way to retrieve the value stored in a variable?

In my Node.js program, I have a snippet of code where I am working with a map named `transMap`. My goal is to retrieve the value for 'yy', which should be "ipaddress", and then output it as JSON. While I expected the JSON response to be { "ipaddr ...

A guide to generating dynamic table headers using JSON in React

Looking to create a dynamic table with columns/headers in React based on a JSON array of objects. The data: example = [ { id: 0, city: 'New York', }, { id: 1, city: 'Paris', }, ] Currently, I'm iterating ...

Guide to setting up an interface-only project (along with its dependent projects) on NPM

I'm encountering two problems with my TypeScript project. Imagine I have a interface-only TypeScript project called myproject-api. My plan is to implement the interfaces in two separate projects named myproject-impl1 and myroject-impl2. I am utilizin ...

The onBlur event attached to a div is triggered when transitioning from one input element to another within the same div

Here's a scenario: I have a div with two input fields nested inside, like this: <div> <input placeholder="Input1"/> <input placeholder="Input2"/> </div> I have a requirement to trigger a specific ...

Create a time of 00:19:59 using JavaScript

I am attempting to display a countdown timer that starts at 20 minutes in the format (00:20:00) using setInterval. Once the countdown is finished, it should display as (00:00:00), but I am having trouble achieving this. <body onload = "onloadFunc();" ...

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

Ways to retrieve the value of the variable within the confines of this particular

In my code, I have private variables in the constructor and public variables in the class. To reference these variables and functions, I use the "this" keyword. However, when trying to access these variables inside a function, I am getting an "undefined" ...

Challenges in Testing Angular 2

During my efforts to conduct integration tests using Angular 2 and Karma test runner, I encountered a perplexing issue. Regardless of the expected outcome, a particular test was consistently passing instead of failing as it should have been. The problem ar ...

Filter an array of objects to only include the unique values and remove any duplicates

var Error-dictionary = [ { code:599, MSG:'unknown' }, { code:404, MSG:'not found' }, { code:599, MSG:'unknown' } ] I would like to transform the data structure into som ...