For questions about the
Questions tagged [mat-select]
154 questions
7
votes
2 answers
How to customize or apply another class with ".cdk-overlay-pane" for angular material mat-select | mat-dialog
I am using mat-select to display a list of options. So, when you click on the mat-select input filed, it shows a list of options using div with cdk-overlay-pane class.
I want to customize cdk-overlay-pane class. Using ::ng-deep I did this like,
…
Vikram Sapate
- 1,087
- 1
- 11
- 16
4
votes
1 answer
How to make Angular Material mat-select select list width automatic and adapt to the widest option?
Problem
I have a Angular 6.1.10 web app. I want the width of the mat-select list options to be automatic and adapt to the widest option in the options list. See the screenshot below:
Code of the Page Showing the mat-select List
HTML Code
EggBender
- 888
- 15
- 36
3
votes
2 answers
Make Angular Material mat-select automatically take width of its selected option
How do I make automatically take width according to its selected option's width? I've looked through the API of mat-select, and was not able to find an option/input for this.
ilya.chepurnoy
- 332
- 4
- 9
3
votes
1 answer
Fill Input Value according to Selected Option in Angular Reactive Forms
I have a Reactive Form. I have an Input with Mat-Select, where the User must pick an option from a List of countries. Each country is an Object with name, capital and population properties.
When the country is picked, the Object is stored as…
FrankS94
- 79
- 8
3
votes
3 answers
Angular: When using mat-select , Is there a way to not select the focused item when I press SPACE button?
By looking at, https://v5.material.angular.io/components/select/overview
There are several keyboard interactions.
Keyboard interaction
DOWN_ARROW: Focus next option
UP_ARROW: Focus previous option
ENTER or SPACE: Select focused item
I am able to…
zhinee
- 105
- 1
- 10
2
votes
1 answer
The mat-select from MatSelectModule doesn´t render the options in microfrontend (ModuleFederationPlugin) angular
My application uses microfrontends usind the ModuleFederationPlugin from angular 13. The MatSelectModule, MatFormField and CommonModule and FormsModule are imported normaly in the microfrontend (MFE).
import { CommonModule } from…
André von Glehn
- 21
- 1
2
votes
0 answers
Tags inside mat-option are removed
I put a (or a
, or an ; I even tried an once) in the text inside a , so that I could make some of the text a different color, like so:
Trevortni
- 688
- 8
- 23
2
votes
1 answer
Angular Material - Scrolling issue for select component
I am currently working on an app developed using Angular Material (v 9.2.0) and Ionic Capacitor. On iOS devices I am currently facing an issue with mat-select component.
As seen in the screenshot, once opened, the list of options doesn't scroll with…
Shardul Sane
- 21
- 1
2
votes
1 answer
Angular Material mat-select - Showing count number along with the first selected value in multiple selection
In mat-select multiple selections, all the selected values are displayed in the select field. I want only the first selected value along with +1 or +2 etc if more than one value is selected.
Ayush Bisht
- 21
- 2
2
votes
0 answers
Angular Material - mat-select stopped working for no apparent reason
I have a mat-select component in one of my components as follows
kenneth-rebello
- 914
- 1
- 7
- 13
2
votes
3 answers
how to create a custom directive for mat select and listen to the change event
In my project it's nessesary to use ElementRef's nativeelement.value because of some readonly errors.
only my directive
export class DeliveryAcrossDirective {
@Input('key') key: string;
@Input('component') component: string;
constructor(
…
Noah Bergh
- 493
- 4
- 14
1
vote
1 answer
Issue with Angular Mat Select showing keyboard focus and mouseover focus
Posting this here to save someone else the headache.
Angular automatically focuses on the first available option when no initial value is set. This can be confusing to the user, because it shows focus on the first option as well as focusing options…
Jefferson
- 21
- 5
1
vote
1 answer
Angular's mat-select is not closing when clicking outside
I am using angular material's select component to load some options to choose from. When I click on the field, the list of options appear as expected, however, when I click anywhere outside the options, the select does not close. I have noticed that…
Osama El-Masri
- 119
- 9
1
vote
1 answer
Angular show mat-select with enum options, and save the selected item
Trying to get through the maze of different (outdated?) options online to figure out to simply show a mat-select which is populated with the possible values of an enum, and store the result so that I can send the selected option to the back…
bas
- 13,550
- 20
- 69
- 146
1
vote
0 answers
mat-select loses selection state when filtering with input
I have a bug in my Angular code where the selection state of a multiple selection mat-select component is lost when filtering the options.
In my HTML template for the component, I have:
…
Alex
- 157
- 1
- 10