Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTML code I am using for this:

<mat-form-field>
    <mat-select formControlName="value" selected="option1">
      <mat-option *ngFor="let item of options"
         [value]="item.value">{{ item.label }}</mat-option>
    </mat-select>
</mat-form-field>

The available items are option1, option2, option3.

Is there a way to ensure that only option2 and option3 show in the dropdown menu when option1 is already selected? Any help would be highly appreciated!

Looking forward to your response!! Thank you in advance!!!

htmlcssangularmat-select

Answer №1

To achieve this effect, you can utilize a CSS class to conceal the chosen country selection.

<mat-form-field>
  <mat-select name="countryVariable" [(value)]="selectedCountry" placeholder="Country">
    <mat-option *ngFor="let country of countries" [value]="country.short" [ngClass]="country.short === selectedCountry ? 'hidden' : ''">
      {{country.full}}
    </mat-option>
  </mat-select>
</mat-form-field>

.hidden{
display: none;
}

Answer №2

Give this a shot:

1- Start by initializing the selectedOption variable as an empty string in your TypeScript component. Then, create a method to update its value:

selectedOption: string = '';

setSelectedOption(option: string) {
  this.selectedOption = option;
}

2- In your HTML file, utilize this method to set the chosen value to selectedOption

<mat-form-field>
    <mat-select formControlName="value" [(ngModel)]="selectedOption">
        <mat-option *ngFor="let item of options" [value]="item.value" (click)="setSelectedOption(item.value)">{{ item.label }}</mat-option>
    </mat-select>
</mat-form-field>

Now, whenever you select an option, the setSelectedOption function will be triggered to update the selectedOption with the chosen 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

RXJS - Hold off until the shop is fully stocked

Here's a function I have that needs some adjustment: combineLatest([this.contact$, this.account$]).pipe( map((res) => {contacts = res[0], account = res[1]})).subscribe() I am facing an issue where the contact$ selector is sometimes empty. If it ...

angulartypescriptrxjs

Utilizing LocalStorage in conjunction with the redux state management

Currently, I am working on a single-page application using React and Redux. I have encountered the need to store certain data locally and ensure that it remains synchronized with the appState in local storage, even after a page refresh. Despite being new ...

javascripthtmlreactjsredux

Updating the div#content dynamically with Jquery without the need to refresh the page

After spending countless hours on this forum, I have yet to find a solution that perfectly fits my needs, so I will pose my question. Here is the gist of what I am attempting to accomplish: When the page loads, the default page fades in and displays. Wh ...

javascriptphpjqueryhtmlajax

How to incorporate an image within a div element without reliance on the <img> tag

I am dealing with HTML content <div> <img src="xyz.jpg"> </div> The challenge I am facing is fetching an image in hex format from a web service, converting it to JPEG, and displaying it inside a div. However, the <img src=""> ta ...

javascriptimagehtml

An issue occurred while trying to retrieve the js file, as an error with code net::ERR_ABORTED 404 (Not

Although this question has been asked before, I am unsure where to find the solution. My express backend server needs to render an HTML page with main.js in it upon launch. app.js code: var createError = require('http-errors'); var express = req ...

javascripthtmlnode.jsexpresshttp-status-code-404

Is it possible to align the radio-button label above the radio-button in Angular Material 2?

Currently, I am utilizing angular material 2 (material.io) and attempting to position the label of the md-radio-button above the radio button itself. Here's an illustration: View Radio Buttons The official documentation mentions that you can easily ...

javascriptangularflexboxangular-material2angular-flex-layout

Is it feasible to embed an entire linked CSS file within Jade?

I keep getting recommendations from Google's PageSpeed Insights to avoid using links for CSS files and instead include the styles directly under a style tag. I'm wondering if there is a way in Jade to specify a CSS file and have its contents pull ...

htmlpug

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

css

Guide on automatically logging in to a specific website using Selenium with Kakao, Google, or Naver credentials

I encountered an issue with my selenium login code for a particular website, where the keys seem to be generating errors. https://i.stack.imgur.com/wJ3Nw.png Upon clicking each button, it brings up the login tab. However, I keep encountering this error ...

pythonhtmlseleniumweb-scrapingweb-crawler

"Unlocking the Power of Angular: Mastering the Art of Ch

Within my angular 7 project, I am looking to chain together multiple HTTP Get requests. However, I want each call to wait until the previous one has completed even if I don't require the response directly in the next call. I am trying to avoid nestin ...

angular

ajax refresh isn't functioning

I need help with updating a combobox with the correct value when a button is clicked. The requirement is that after the user selects a year from the combobox, enters a day in the 'HolidayYearAllocation' input box, and clicks the button, the &apo ...

htmlasp.netajaxcomboboxupdatepanel

Invoking the HTML method from a WCF service

Currently, I am utilizing a callback in my WCF service to receive raw frames from the camera. I am currently working on developing an HTML application that will showcase these frames. However, my current approach involves using a button click event in HTM ...

javascriptjqueryajaxhtmlwcf

Interactive YouTube video in a responsive classroom environment

Hello! I have a website at bit.ly/1EfgOsM and I am trying to align the video box with a YouTube video next to an image box. The width of the image box is set to 40%, so I want the video box to also be responsive with a width of 40%. The video box is in a s ...

htmlcssyoutuberesponsive-design

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

The varying sizes of my search and login buttons located beside each other are puzzling me. Could it be due to the fact that the search button is enclosed within a submit_tag argument while the login button is not? If this is indeed the case, how can I mak ...

htmlcssruby

Issues arise in TypeScript 5.1.3 with lodash due to type errors involving excessively deep type instantiation, which may potentially be infinite

Recently, I made updates to my Ionic/Angular project and now it is running Angular version 16.1.3 along with TypeScript version 5.1.3. In addition to this, my project also includes the following dependencies: "lodash-es": "^4.17.21", ...

angulartypescriptlodash

How does NgRx handle updating remote data once it has been modified?

I'm struggling to grasp the inner workings of NgRx. My user list is retrieved from a Firebase store using a service like this: getAllUsers():Observable<object>{ console.log('getAllUsers'); return this.afs.collection('us ...

angularrxjsngrx

I am looking to display the pop-up exclusively when the page is clicked, but unfortunately it is also appearing when the Menu is clicked

I've been working on this code and trying to make some modifications, but I just can't seem to find the right solution for my issue <!-- Updated main content --> <main> <p> Click on the menu button located in the top right ...

javascripthtmljquery

Is there a way to retrieve user input without having to submit the form?

I am looking to capture user input without the need for submission, and then pass it through an AJAX method as a parameter to an action. Despite trying various methods, I have not been able to find a solution. Below is the code snippet: <input type="t ...

htmlasp.netajaxasp.net-mvcrazor

Tips for sending a JavaScript variable within a div's ID in a Twig loop?

How can I insert a JavaScript variable into the ID of a div inside a Twig loop? Here is my unsuccessful attempt: <script type="text/javascript"> id = 0; </script> {% for element in parent.elements %} <div id="mydiv"> ...

javascripthtmltwig

Issues with vertical repeating in CSS Sprites

Hey there, I'm currently working on implementing css sprites in my web application. The challenge I'm facing is that I have organized the background of my website vertically within a sprite image. Now, one specific portion of the sprite needs to ...

csscss-sprites