Questions tagged [mat-option]
33 questions
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
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
How to embed the toggle button into the mat-options?
I need to embed the toggle button or radio button inside the mat-options list. The desired design is as follows.
ISSUE:
I have added the toggle button inside the options list with the following code but by clicking on the toggle button the option…
Abdul Moeez
- 1,331
- 2
- 13
- 31
1
vote
1 answer
ngIf condition on mat-option is not getting executed
I have 2 mat-options.
1 for loading items from backend and another to display None.
…
Swati Rai
- 15
- 3
1
vote
1 answer
I created a dropdown usingwith search option for list,When I clicks on space button in searchBox it is automatically selecting a list item
Description : I created a dropdown list using which contains list of items and one search field in the list. So that user can search the items in a list instead of scrolling through big list in drop down menu. And can select the items in the…
lava
- 13
- 2
1
vote
1 answer
how to override angular material mat-option style
The height doesn't get bigger and the inscription gets smeared and not pretty
I have already tried many types of solutions but none of them worked I tried to do
::ng deep .mat-option{...}
But it didn't work
I tried to do
::ng-deep…
itty
- 55
- 6
1
vote
1 answer
Mat Select option cant get data
I have this code where i can view the options but cant get the value when selecting it, it just shows blank. I can only view the status options.. Can anyone know how to fix the problem?
HTML File
…
Xen
- 105
- 9
1
vote
2 answers
How to check if option value was selected? Angular
I have a template, with mat-autocomplete, in which I search for elements and I have option elements - each individual element. My goal is to write logic: if I have an element selected, my input should be disabled. How can I check whether a certain…
Dmitry Chernyak
- 295
- 3
- 12
1
vote
1 answer
Angular Material - How to customise style of selected option
I am working on an Angular application using the Angular Material library.
component.html
{{ option.name }}
Ayam Chan
- 75
- 7
0
votes
0 answers
How do I set an image as selected in dropdonw
I am using to populate images in the dropdown like below:
![]()
sabin
- 841
- 12
- 15
0
votes
0 answers
Nested mat-option inside a mat-select
I am new to angular and tried to add a nested mat-options.
Is there a way to have a nested mat-option in a mat-option within a mat-select?
I need to have a list of which one of the item in the dh list has nested options.
I have tried something like…
Autumn
- 339
- 5
- 19
0
votes
2 answers
angular mat-option using getter results in infinite loop
I'm using angular material select to display a dropdown in my app, when the data is provided from a parent using a getter, it causes an infinite loop, I can't find the source of resetting the input options,
an example
Will appreciate any help,
I…
Shalashka
- 47
- 6
0
votes
0 answers
Angular Material mat-option component, where are the docs?
I can't seem to locate the api docs for mat-option. I have been to the api docs here:
https://material.angular.io/components/categories
but their doesn't seem to be any information on mat-option. I need to know what properties are available on…
StvnBrkdll
- 3,924
- 1
- 24
- 31
0
votes
0 answers
How to select all the options in mat-select by default
I want to select all the options by default in mat-select
Here is my code:
Questions ({{questionSelected}} of {{structureViewObj.records[0].questions.length}})
Faisal Amdani
- 109
- 14
0
votes
2 answers
How to enable input fields if a certain mat-option is selected or not?
Based on this topic's accepted answer, I managed to get the selected state of the clicked option. I want to disable an input based on a selection of a certain option. With the below example, I am able to enable/disable the input when any option is…
Ionut
- 724
- 2
- 9
- 25