Stack Overflow
Stack Overflow

Questions tagged [mat-select]

For questions about the form control element for Angular Material. When using this tag also include the more generic [angular-material] and [angular] tags where possible.

154 questions
1
vote
2 answers

Dynamically position Angular Material 13 mat-select dropdown without affecting autocomplete

Lots of people seem to have this issue but I haven't found a solution that doesn't create problems in other areas. How to customize mat-select dropdown position? .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing:…
Khepf
  • 352
  • 1
  • 4
  • 24
1
vote
1 answer

how to bind mat-select with dynamic data from api

when making async call to api and trying to bind data from api to mat-select control it is not binding bcoz mat-select has already been set while the results are fetched after sometime. Can anyone tell me how to fix…
raghav
  • 53
  • 1
  • 9
1
vote
1 answer

How to use [(ngModel)] in a multiple select to select the options stored in the database?

[(ngModel)]="parameters.account.roles" contains the selected options as those are obtained from the database, but no option is selected when I open the dialog. All other fields show the correct data and parameters.account.roles is not…
Daniel Matute
  • 13
  • 5
1
vote
0 answers

Angular material select not working on filtering options

I'm using mat select (multiple) along with ngx-mat-select-search to search the items. https://www.npmjs.com/package/ngx-mat-select-search To display the selected items, I'm using material chips. Live example:…
Vikram Sapate
  • 1,087
  • 1
  • 11
  • 16
1
vote
1 answer

Add mat-option conditionally to mat-select

Remove some parameters inside a mat-select Hi everyone! I'm bringing some parameters (7) from a database but I only need to work with 4, so that when displaying the list of the mat-select it shows me only the 4, not 7. I have tried to hide them with…
Aragorn8806
  • 17
  • 10
1
vote
0 answers

How to make Select all functionality for multiple mat-selects created with "*ngFor"

enter image description hereI have seen similar discussions on here. I think mine is unique enough to add as a new thread. I am working on a table with dropdowns for each column. I have used the information on here to implement "selectall"…
Ainsley Morgan
  • 11
  • 2
1
vote
2 answers

Implement search filter with mat select multiple

I'm trying to implement a search filter for a multiple mat-select but I have an issue when I'm searching and selecting. My search function is working properly. But if I search for something, select it and then search for something else and select…
akromx
  • 59
  • 1
  • 2
  • 10
1
vote
1 answer

Set a mat-select default value only if just one value is present

I have a mat-select in my angular project, which takes values from a server and shows them. What I need to do is to make sure that, in case the value received is exactly 1, to show it as a default value, but only in that case since the values aren't…
Lorenzo Bertolaccini
  • 43
  • 1
  • 8
1
vote
1 answer

Angular - Implement NgxMatSelectSearch in mat-select

I am trying to use a search box in a mat-select that works correctly only when using data loaded by default. I want to use data from an api. But it does not work properly, the data is not displayed in the mat-select when loading the page, but it is…
Emy
  • 62
  • 7
1
vote
1 answer

Angular mat-select binded to array's elements by ngFor's index property causes undesirable behaviour

Problematic code ts part: import { Component } from '@angular/core'; import { FormControl } from '@angular/forms'; @Component({ selector: 'my-app', templateUrl: './app.component.html' }) export class AppComponent…
turanszkik
  • 494
  • 5
  • 15
0
votes
1 answer

How to remove padding in the mat-select-panel

How do I remove this padding for the ma-select-panel. I have tried using ng:deep .mdc-menu-surface.mat-mdc-select-panel { padding: 0px !important; } But I just couldn't remove it. Any help would be greatly appreciated, thanks in advance for your…
sahus
  • 328
  • 1
  • 9
0
votes
0 answers

mat-select selected text in center

I used the code .mat-mdc-text-field-wrapper { height: 40px !important; } which is used to reduce the height of the mat-form-field, after reducing the height, selected text is displayed in the center vertically, please guide me to do that.
Deivanayaki
  • 1
  • 1
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
1 answer

Angular 12 unit testing - How to get mat-select input value with findEl

I can get the input value of the form field above by using this query in my spec file: expect(findEl(fixture, "mail").nativeElement.value).toBe('email@mail.com'); E-Mail
Bianca Yameê
  • 80
  • 1
  • 6
1 2
3
…
10 11