Stack Overflow
Stack Overflow

Questions tagged [angular-material-5]

Angular Material is an implementation of Material Design in Angular. Do not use this tag for AngularJS Material, the implementation of Material Design for the older AngularJS framework.

Usage

  • This tag is intended for questions which ask about Angular Material using Angular 5.x.x

    Note: Consider also tagging such questions with the tag, as well as the tag

  • Please take note that you should use the tag for AngularJS 1.x Material questions instead of this tag.

Goal

Taken from the official repo:

The goal is to build a set of high-quality UI components built with Angular and TypeScript, following the Material Design spec. These components will serve as an example of how to write Angular code following best practices.

Asking a question

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

160 questions
5
votes
5 answers

How to make Angular Material Table with sticky first column

Is there any way to make Angular Material with a sticky first column using CSS?. Here is ready to edit Stackblitz code I have tried to adapt this solution https://jsfiddle.net/zinoui/BmLpV/ but for some reasons, the first column is thrown out of…
Antoniossss
  • 31,590
  • 6
  • 57
  • 99
4
votes
2 answers

startWith on first click of focus

Working on AutoComplete that pulls cities from an API and then allows users to search for trips. The problem is, even though I am using startWith, I first have to click in the field and then start typing for it to work but I can't get the drop…
Pari Baker
  • 696
  • 4
  • 19
4
votes
2 answers

Angular material: displaying icons to the right of mat-chip

I have a mat-chip and have content in it. Also I have a cancel icon in it. I set the mat-chip a fixed width, so I want the cancel icon to always float to the right.But the cancel icon is not floating to the right. I tried multiple css techniques but…
indra257
  • 66
  • 3
  • 24
  • 50
4
votes
2 answers

matAutocomplete control.registerOnChange is not a function

Can't find the issue.. It works but presents error and opens values after a bit of scroll.. Anyone? control.registerOnChange is not a function searchPort: FormControl = new FormControl(); searchPortResult =…
Tzvi Gregory Kaidanov
  • 3,080
  • 3
  • 26
  • 33
4
votes
1 answer

Individual Column filter for mat table

I've been looking for any examples of a filter on a column in mat table and so far haven't found any.I did came some bits and pieces information about filterPredicate method but did not get exactly as to how approach it. My need is that an…
kal93
  • 522
  • 1
  • 9
  • 22
4
votes
0 answers

Vertical scroll in overlay creating using angular-cdk

I've used cdk's Overlay to show some content when a button is clicked. Everything working as expected except the vertical scroll mechanism. Content inside the overlay is getting the vertical scrollbar when I'm reducing the height of the browser.…
Vivek Kumar
  • 4,822
  • 8
  • 51
  • 85
4
votes
3 answers

Angular Material Dropdown inside Bootstrap Modal

I have an Angular 5 app that must use Angular Material's mat-select inside a Bootstrap modal. The issue is that the dropdown options appear behind the modal. My code looks like this: …
Alex Verzea
  • 421
  • 1
  • 11
  • 30
4
votes
2 answers

How to close all dialogs modal opened using angular-materiel at once

I'm using angular material dialogcomponent in my angular app to open a dialog box whenever an error comes from the server. If multiple error comes at time it opens multiple dialog boxes that's fine for me.I want close all dialog boxes at once using…
Krishna
  • 760
  • 3
  • 14
  • 30
4
votes
1 answer

Angular Material data Table with dynamic rows

I am using Angular 5 and Angular Material data table for constuction of the data. I'm referring an example in the below site. In this consider I need to include the dynamic data to each row as in the screenshot where 'favorite' is the column…
Sundar
  • 655
  • 2
  • 7
  • 13
3
votes
3 answers

Center Mat-Menu, Center MatMenu Overlay to Button

Per Material Issue 9631 centering the mat-menu to the button is as follows. the issue is that supporting it deviates from the spec and may end up looking weird. I have a need for this functionality... Because writing my own CDK overlay would be…
Marshal
  • 10,499
  • 2
  • 34
  • 53
3
votes
3 answers

My sidenav does not push the content, it overcomes it

I'm trying to make the Side Material Sidenav push the content when I open the bar and obviously when it closes; the elements that were pushed back into place. Currently what it does is open up over the content Here's my…
S. A
  • 493
  • 2
  • 6
  • 14
3
votes
3 answers

How to change mat-select placeholder color?

I am trying to change the color of a mat-select placeholder. It works fine if this is 'background-color' but not if this is 'color'. Here is my css code: /deep/ .mat-select-placeholder { color: red; } .mat-select-placeholder { color: red; …
corleone88
  • 161
  • 2
  • 2
  • 9
3
votes
2 answers

How to add space between underline classes in mat-form-field elements?

I'm trying to add multiple form fields, I wanted to add 2 form fields in a row but I'm not able to add space between form fields ( not able to separate underline)
  • RS17
    • 773
    • 1
    • 9
    • 23
    • 3
    votes
    1 answer

    Mat Input placeholder text is blurry

    The matInput placeholder text is blurry on Chrome/Safari (I think everything). Code:
    …
    user10181542
    • 1,210
    • 3
    • 16
    • 37
    3
    votes
    1 answer

    Adding a loading indicator to Material Autocomplete

    I'm working with Material Components for Angular 5, and have a form control that is an autocomplete for that is powered by a service call. Unfortunately, until the service call is complete, the autocomplete does not show, and due to some network…
    Marshall Tigerus
    • 3,675
    • 10
    • 37
    • 67
    1 2
    3
    …
    10 11