Issue with Angular 7: "valueChanges" not being activated from the template when using mat-option

I have a form control that I am customizing in my template using mat-option. However, I want this specific customization to not trigger "valueChanges", as I have other changes that should call the "valueChanges" function.

Here is the setup in my component:

inputControl = new FormControl('');

    ngOnInit() {
        this.inputControl.valueChanges
            .pipe(takeUntil(this.onDestroy))
            .subscribe(val => {
              //do something
            });
    }

In the HTML:

<ng-container *ngIf="inputControl.value as val">
        <mat-option *ngFor="let result of autocompleteResults; let i = index" [value]="result.displayName"
                    (onSelectionChange)="searchByResult($event, result)">
           {{result.displayName}}
        </mat-option>
    </ng-container>

Is there any way to achieve the desired outcome without triggering "valueChanges" for this specific change?

Answer №1

Ensure that your mat-option is enclosed within a mat-select element as shown below

<mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
</mat-select>

Take a look at the angular material documentation for helpful examples and code snippets

Here's the link: https://material.angular.io/components/select/overview

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

The NetSuite https.post() method is throwing an error that reads "Encountered unexpected character while parsing value: S. Path '', line 0, position 0"

I'm currently facing an issue when trying to send the JSON data request below to a 3rd party system using the "N/https" modules https.post() method. Upon sending the request, I receive a Response Code of "200" along with the Error Message "Unexpected ...

Encountering a CastError while attempting to send a POST request using Postman

I'm encountering a CastError when attempting to send a POST request using Postman. Why am I unable to simply send the patient and provider fields as strings? Should I refer to this documentation for guidance? I've come across some solutions, but ...

Dealing with CORS, IIS7, and PHP - Overcoming the Access-Control-Allow-Origin obstacle

I am attempting to enable another local host (such as javascript.dev) to make a xhr request to this particular host, which operates on an IIS7 server. When I perform a curl -I command, the headers I receive are as follows: HTTP/1.1 200 OK Content-Length: ...

The Sluggishness of MongoDB Aggregation in Determining Distinct IDs within Retrieved Documents

Not only does my Mongo view return a filtered set of documents to the end user, but it also runs a couple of functions to calculate running totals. Strangely though, while my find() operation is blazingly fast (225ms), this additional aggregation process t ...

AJAX nesting with varying input speeds

So, this is the situation - during a job interview I was presented with an interesting AJAX question: The scenario involves code where the onChange function triggers an AJAX call to the 'asdf server', and then that call initiates another AJAX ca ...

Retrieve the information from the AJAX request executed within Selenium

I am currently developing a test to verify that a link on a page is correctly referencing the intended destination (link generated dynamically). In order to test this link, I plan to use an AJAX call in Selenium to retrieve the correct URL from the server ...

A function that extracts a number from an array and passes it as an argument to another function

Having trouble with a piece of jQuery code :) Here’s the issue: I have an array called var arr. We have a function called get_number() which retrieves each number from the array. We also have a function with a parameter called inner_li_height(numb ...

Creating a floating popup within a designated DIV by containing a panel with a textbox and a button inside

The code snippet for the popup is as follows: <div id="commentBox" class="commentBox"> <div class="panel panel-default"> <div class="panel-body"> <input type="text" value="" id="annotationText" /> <button typ ...

Filter the ng-repeat list dynamically by triggering ng-click event

I am currently developing an application on that requires users to be able to filter a list of credit cards by clicking on filters located on the interface, such as filtering for only Amex cards or cards with no fees. Although I have successfully bound t ...

Upload Avatar Images Without Uploading the Entire Page

Exploring options for integrating an avatar image upload feature into my project. Interested in finding an AJAX/jQuery solution that facilitates seamless image uploading without the need to manually refresh the page post-upload. ...

@nestjs - JwtModule.registerAsync is failing to register in a timely manner, resulting in unresolved dependencies

Encountering some challenges with the registerAsync function in combination with JwtModule and JwtService. While browsing various discussions, it seems like many were stuck on ConfigModule, but that's not a part of my project. Let me provide some con ...

Issue arises with CORS causing Karma test for Angular 4 component to fail

When executing ng test, I encounter an error (I am using the standard setup with Karma) while trying to test a component: XMLHttpRequest cannot load ng:///DynamicTestModule/FullModalHeaderComponent.ngfactory.js. Cross origin requests are only supported fo ...

Tips for effectively waiting in Selenium for a list to finish scrolling

For my project, I decided to write Selenium code using Javascript in order to automatically scroll down a list by simulating the Down key on the keyboard. Although there are simpler ways to achieve scrolling with Javascript commands, I specifically wanted ...

The CakePHP 3 framework is generating an Ajax response with a 200 response code, but there is a parsererror occurring

Currently, I am trying to make an ajax request from a JavaScript file to a CakePHP controller. The ajax request involves sending a straightforward JSON object (I've kept it simple in this example by hardcoding it). During logging, the server can succ ...

Having trouble with JavaScript canvas drawImage function not functioning correctly

Having some trouble drawing part of an image properly. The width and height are not matching the original. Check out my code below: window.onload = function() { ImageObjSketch = new Image(); // URL ImageObjSketch.src = 'https://i.imgur.com/75lATF9 ...

What is the best way to extract a JSON value and use it across multiple functions?

Currently, everything seems to be working fine. However, I'm unsure about the correct way to call the json data. I attempted using a direct link but it didn't work. Do I need to modify the "data" parameters? I'm confused because I saw that ...

Having an issue with AWS CodePipeline - encountering build failure and receiving an error message

I am encountering an error while trying to develop and deploy an Angular7 project to S3. The specific error message is as follows - how can I go about resolving this issue? [Container] 2019/05/21 04:08:49 Waiting for agent ping [Container] 2019/05/21 0 ...

Tips on how to indicate a checkbox as selected within an Angular controller

I'm in the process of creating a form for entering new service requests, as well as displaying and editing existing ones. One part of this form includes a list of labeled check-boxes that represent different countries. When an existing request is disp ...

The impact of animation on vertical scrolling distance

At the moment, I'm utilizing the animation library found at . Whenever I trigger my confetti animation, the Y Scroll steadily rises until the animation completes. I'm curious if there's a method to cap the y-scroll at a certain height. I wo ...

NG2-smart-table Icons not appearing when using ngx-admin theme

In implementing my ng2-smart-table within an Angular project, I have utilized the ngx-admin theme for styling. Following the documented configuration steps involved installing necessary dependencies and importing required styles in my styles.scss file. Th ...