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

Combining ASP.NET MVC with HTML5 for dynamic web development

We are in the process of planning a new project and are interested in utilizing ASP.NET with the MVC pattern. Additionally, we want to incorporate the new features of HTML5. However, we have been having trouble finding sufficient information or connecting ...

asp.net-mvchtml

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

filtering elements with selectable functionality in jQuery UI

I'm trying to exclude the <div> children from being selected within this list item and only select the entire <li>. The structure of the HTML is as follows: <ul id="selectable"> <li> <div id="1"></div> ...

javascriptjqueryhtmlcssjquery-ui

Can you include the dollar symbol in the currency format?

I currently have this code that formats numbers into currency format, however I would like to include the dollar sign ($) before the numbers. document.getElementById("numbers").onblur = function (){ this.value = parseFloat(this.value.r ...

javascripthtmlnumberscurrency

Retrieving the URL of a previous page in a Nest.js server

In our application, we utilize Angular 8 for the user interface and Nest Js server. One challenge we are facing is that when navigating to different pages within the application, the page URL includes a port number. While I am able to access this page UR ...

angularnestjs

Morris.js tutorial: Enhancing bar charts with data labels

I have this: But I want this instead: Does morris.js support this feature? If not, what would be the most effective method to implement it? ...

javascriptjqueryhtmlcssmorris.js

Troubleshooting Angular 2 Final Release Visual Studio - encountering issues with finding module name and incorrect module.id path leading to 404 errors

After upgrading to the Angular 2 Final Release (I am using Visual Studio 2015 and TypeScript 1.8), I noticed that my line moduleId: module.id in my components now has a red squiggly underline and displays an error saying cannot find name 'module' ...

angular

Syncing data between local storage and a remote server using Ionic5 provider

I've been considering implementing a data provider that could store a duplicate of the backend data locally for quick access. I believe this concept is referred to as mirroring or something similar. Nevertheless, it must be synchronized and updated r ...

angulartypescriptionic-frameworkionic5

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

What is the best way to extract the text from the first visible `<td></td>` table row using jQuery?

In this particular scenario, there is a table included: <table id="table"> <thead> <tr> <th>Name</th> <th>Course</th> </tr> </thead> <tbody> <tr style="display:none"> ...

javascriptjqueryhtml

Update the content of a div and refresh it when a key on the keyboard is pressed

I need to hide the images in a div when I press a key on the keyboard. How can I achieve this? <div> <span role="checkbox" aria-checked="true" tabindex="0"> <img src="checked.gif" role="presentation" alt="" /> ...

javascriptjqueryhtmlcss

Issue encountered when using Angular CLI to generate new files in the current directory

I've encountered an issue where, when using Angular CLI to generate components, it places them in the App folder instead of the current directory. For example, if I navigate to App/Recipe and run "ng g c recipe-item", the component will be generated i ...

angularwebpackcommand-line-interface

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

javascripthtmlhyperlink

What is causing my HTML file path to function on my server, but not when I access the HTML file directly?

My file structure is organized as follows: The main file is located in the folder "HTML-Project/index.html". Within this folder, I have my style.css file and two other folders: one for pictures (HTML-Project/pictures) and another for categories (HTML-Proje ...

htmlcsswindowsfileserver

Using an iframe to access HTTP content from an HTTPS website

Currently, I am facing an issue with a page that contains an iframe loading an HTML template from an Amazon AWS S3 bucket. Within the iframe, my goal is to take the link of the parent window and add additional parameters. For example, let's say my pa ...

javascripthtmliframeamazon-s3

Paragraph Separated by Bullets Without Bullets At End of Line

I need assistance in creating a unique type of list that I call a "bullet separated paragraph list" by using a javascript array of strings. For example: item • item • item • item • item     item • item • item • item item • ...

javascripthtmlcss

Just getting started with JavaScript and running into trouble creating an array of image objects using an array of strings

I am struggling to accurately describe my issue, making it difficult to find a solution. I have an array called tempData generated from a text file that I want to reference with variables of the same name as the strings in the array. var red = new Image ...

javascriptphphtmlcss

The subscription function in observables may result in values that are undefined

I integrated a new angular 2 library into my application called "angular2-grid". This library is located within the node_modules folder. Furthermore, I created a service as shown below: import { Injectable } from '@angular/core'; import { Htt ...

angulartypescriptobservable

Exploring Angular2: A Guide to Interpolating Expressions in Templates

Is it possible to interpolate different types of Javascript expressions? Along with displayed properties like object.property and short expressions such as {{1+1}}, what other valid Javascript expressions can be used for interpolation? ...

javascriptangularangular2-templateangular2-directivesangular2-components

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

htmlcss