Stack Overflow
Stack Overflow

Questions tagged [angular-material-7]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 7.x of Angular Material2 for Angular 7. Do not use this tag for other versions (e.g. v5, v6) or for AngularJS Material (the implementation of Material Design for the older AngularJS framework).

Usage

  • This tag is intended for questions which ask about Angular Material2 v7.x
  • 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:

Our 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

  • Mention the versions of Angular and Angular Material2 that you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on stackblitz.com
  • If there's a bug (or some unintentional behavior), try to troubleshoot the problem. (If it's a bug report, please create a new issue at Angular Material2's Github repository instead.)

Learn more

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

162 questions
25
votes
7 answers

Use font awesome 5 on angular material 7

I'm using angular 7.0.1 and angular material 7.0.2, I want to add the font awesome 5.4.2 icons and I'm trying to follow the steps on fontawesome web but I can't get the font awesome icon font. first: npm install --save-dev…
Alex
  • 1,230
  • 2
  • 24
  • 46
17
votes
6 answers

How to change toggle icon of mat-expansion-panel?

The default icon for toggling a mat-expansion-panel is >. Setting hideToggle true just hides the toggle icon. Is there any way to change it? I found nothing in the official documentation. I want to use + or - icon if the state is closed or opened…
Samiul Alam
  • 2,174
  • 4
  • 11
  • 29
17
votes
2 answers

Angular 7 Material Expansion Panel flicker

i upgraded to Angular 7.1.0 with: "@angular/animations": "^7.1.0", "@angular/cdk": "^7.1.0", "@angular/common": "^7.1.0", "@angular/compiler": "^7.1.0", "@angular/core": "^7.1.0", "@angular/forms": "^7.1.0", "@angular/http":…
Philip Schikora
  • 283
  • 1
  • 3
  • 9
10
votes
5 answers

Angular material stepper before-selection-change & prevent step-change for some condition

I am using linear mat-stepper. It works fine with next. I do api call & if it's success then i call stepper-next event instead of using matStepperNext directive. Now when user fills all data on step 1 & directly click on some other step in header…
Ankur Akvaliya
  • 2,989
  • 4
  • 28
  • 53
9
votes
1 answer

Drag and Drop on Mat-Dialog (Angular Material CDK) not working. Wrong previous and current index

I have a list of themes, and each them has a list of colors. I display all the themes with a button that opens an Angular Dialog, in the dialog I list all the colors for that theme and these colors can be reordered @angular/cdk/drag-drop. If I have…
tif
  • 1,109
  • 2
  • 12
  • 32
8
votes
1 answer

How to theme angular material component shapes?

Is there any way to theme component shapes in angular material? I know material design has a shape concept that allows you to create more rounded, less rounded or even cut corners for all small/medium/large components. Is there a way to implement…
Canolyb1
  • 672
  • 5
  • 17
8
votes
2 answers

how to add a secondary action in mat-list-option (mat-selection-list) item

How is it possible, to add an secondary action (mat-icon-button) in an mat-selection-list inside the mat-list-option element. Currently all items are added inside the mat-list-text div. example…
Richard Liebmann
  • 416
  • 1
  • 6
  • 19
7
votes
1 answer

Keep Angular Material Auto Complete open after selection

I've used the angular material chip control and this all works fine. However it would be nice if the auto complete element stayed open so multiple selections could be made. In it's default state you have to move focus to a different control and back…
Sun
  • 4,458
  • 14
  • 66
  • 108
7
votes
2 answers

Angular Material - how to set mat-horizontal-content-container padding 0

Im using angular material stepper. I need set padding 0 on mobile view.On developer console i could set padding 0 by changing .mat-horizontal-content-container. But its not working when i add .mat-horizontal-content-container{padding:0…
Cem Kocagöz
  • 634
  • 12
  • 26
6
votes
3 answers

How to test that component template contains mat-error

I want to create test for component that checks that mat-error is displayed. I've created a test but it's failing because DOM does not have mat-error at all during testing. Although it works fine when project is served. Template snippet …
orlyohreally
  • 410
  • 6
  • 19
6
votes
4 answers

How to refresh mat-calendar after changing the background of highlighted dates

I have a mat-calendar control which is open always. On initial load, I am highlighting an array of dates which was able to do following this: Highlighting certain dates in mat-calendar. Now I have to highlight today's day (or selected date) on a…
adarsh
  • 173
  • 1
  • 2
  • 11
6
votes
6 answers

How Can I customize mat-form-field in disabled state

I am trying to customize the angular material mat-form-field : I was able to customize the underline border using : ::ng-deep.mat-form-field-ripple { background-color: yellow; } now I am trying to customize the underline border in the disabled…
Ebram
  • 1,042
  • 1
  • 13
  • 26
6
votes
1 answer

Angular Material 7 Drag and Drop x and y coordinates

I have a container with an element inside it. I want to be able to drag the element to another location inside the container and see the new x and y coordinates (where x=0 and y=0 is the top left corner of the container). I have a basic stackblitz…
Tim
  • 1,605
  • 6
  • 31
  • 47
5
votes
1 answer

How to change elvation of a row in mat-table

I am trying to elevate hovered row in mat-table so changing elevation to a on hover but elevation that is shadow effect not showing at the bottom side of the row however showing for the top, left, and right sides of the row. .html
Ramesh
  • 1,041
  • 15
  • 39
5
votes
2 answers

how to show the Scrollbar below the Sidenav Toolbar in AngularMaterial-7

Please help me to achieve the below two methods: 1) How to show the sidenav scrollbar below the toolbar in the sidenav: 2) Also how to show the Scrollbar only when we move the mouse cursor over the side nav. Thanks in…
Pradeep
  • 581
  • 3
  • 11
  • 19
1
2 3
…
10 11