Executing a function when a value changes in ng-selectize

I recently started using Angular and I found this useful library for select options - https://github.com/NicholasAzar/ng-selectize

Although two-way binding is functional, I am facing difficulty in triggering a function when the select value changes.

Take a look at the following code snippet -

signup.component.html

<ng2-selectize id="date" class="small" name="date" [config]="singleSelectConfig" [options]="dates" placeholder="Date" [(ngModel)]="model.date" required #date="ngModel" ngDefaultControl (change)="updateDate()">
</ng2-selectize>

signup.component.ts

DEFAULT_DROPDOWN_CONFIG: any = {
    highlight: false,
    create: false,
    persist: true,
    plugins: ['dropdown_direction', 'remove_button'],
    dropdownDirection: 'down'
};

SINGLE_SELECT_PRESET_VALUE_CONFIG = Object.assign({}, this.DEFAULT_DROPDOWN_CONFIG, {
    labelField: 'value',
    valueField: 'id',
    searchField: ['value']
});

singleSelectConfig: any = this.SINGLE_SELECT_PRESET_VALUE_CONFIG;

updateDate() {
        // Execute desired functionality here
}

Answer №1

Implement ngModelChange:

[(ngModel)]="model.date" (ngModelChange)="dateModified($event)"

Replace $event with the updated model. Alternatively, you can retrieve it using this.model.date in the corresponding component.

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

What is the process for retrieving the parent component from projected content?

One interesting aspect to explore is the varying behaviors of input based on its 'parent' element. The structure I am referring to is as follows: In my first example, the input is nested within the app-chip-list component. APP COMPONENT HTML & ...

Parsing error occurred: Unexpected empty character found while attempting to load .lottie files

I have a NextJS application and I'm integrating the dotLottie player from this repository. Even though I've followed the setup instructions provided in the documentation, I keep encountering an error when the component attempts to load the dotLot ...

Issue with Nodemon and Typescript causing errors with Worker Threads

Currently, I am in the process of integrating a worker thread into my Typescript and node.js application. Let's take a look at my thread.ts file: import { Worker, isMainThread, parentPort, workerData } from "worker_threads"; let thread ...

Using Ionic4 and Angular to create ion-select dynamically within *ngFor loop inadvertently causes all ion-select-options to be linked together

I am looking to dynamically generate a list of ion-select elements based on an array within an object named myObject.array. When I attempt to create this list using mypage.page.ts and mypage.page.html, all my ion-select-options end up interconnected - cha ...

data not corresponding to interface

I am encountering an issue that says Type '({ name: string; href: string; icon: IconDefinition; } | { name: string; href: string; icon: IconDefinition; childs: { name: string; href: string; icon: IconDefinition; }[]; })[]' is missing the followin ...

Angular's HttpClient makes sure to wait for the HTTP requests to complete

Initializing arrays with the call this.Reload.All() is causing confusion and breaking the service due to multiple asynchronous calls. I am looking for a synchronous solution where each call waits for its response before proceeding to the next one. How can ...

Another way to implement styling in TypeScript

Given that TypeScript limits decoration to class, method, property, or setter/getter due to hoisting restrictions, is there a workaround to decorate a raw function? Perhaps an alternative decoration mechanism could be implemented or a custom solution cre ...

What is the best way to sort a list with parent and child elements using Angular 2?

I have a tree structure in Angular 1 that allows me to filter the list at any level by typing in a textbox. Check out this demonstration to see it in action. Now, I am working on converting this functionality to Angular 2 and aiming for the desired output ...

Saving a local JSON file in Angular 5 using Typescript

I am currently working on developing a local app for personal use, and I want to store all data locally in JSON format. I have created a Posts Interface and an array with the following data structure: this.p = [{ posts:{ id: 'hey man&ap ...

How can I achieve this using JavaScript?

I am attempting to create a TypeScript script that will produce the following JavaScript output. This script is intended for a NodeJS server that operates with controllers imported during initialization. (Desired JavaScript output) How can I achieve this? ...

My goal is to create a map and store its data in an array called "rows." This array will then be utilized in a DataGrid component from material-ui

However, when I run a console.log(rows), it returns an undefined list. let rows: Array<{ id: number }> = [] rows = products?.map((product) => { id: product.product_id } ) Attempting to do it without using map does work, like so: let rows = [ ...

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

Tips for defining data types for spreading properties in TypeScript

I'm grappling with adapting this code to function properly in TypeScript type ScrollProps = { autoHide: boolean autoHideTimeout: number autoHideDuration: number } const renderThumb = ({ style, ...props}) => { const thumbStyle = { borde ...

Unable to establish a connection with ngModel despite the FormsModule module being successfully imported

I'm currently following the tutorial Tour of Heroes and I've reached a point where I need to add my first input field. Even though I have included FormsModule in AppModule, I keep getting an error saying "ng Can't bind to '{ngModel}&apo ...

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

As I navigate through a view, it does not start from the beginning; rather, it picks up from where the previous view left off

Currently, I am facing an issue with my angular project where the view is not loading from its initial starting point. Instead, it is displaying from the last visited point of the previous view. Any assistance with this matter would be greatly appreciate ...

Tips for creating dynamic amd-dependencies in TypeScript

Is there a way to dynamically load a Javascript language bundle file in Typescript based on the current language without using static methods? I want to avoid having to use comments like this for each bundle: /// <amd-dependency path="<path_to_bund ...

No results returned by Mongoose/MongoDB GeoJSON query

I have a Schema (Tour) which includes a GeoJSON Point type property called location. location: { type: { type: String, enum: ['Point'], required: true }, coordinates: { type: [Number], required: true ...

A guide on transforming form values into objects in Angular6

Within my form, I have various input fields including text boxes, select options, and checkboxes. Upon submitting the form, I aim to gather the values of all input fields in a specific format: {"email":"[email protected]","password":"test123","list":["on ...

Steps for Signing Up for a Collaboration Service

I'm struggling to understand how to monitor for new values in an observable from a service. My ultimate objective is to integrate an interceptor, a service, and a directive to show loading information to the user. I have set up an interceptor to liste ...