Stack Overflow
Stack Overflow

Questions tagged [angular-material-6]

Angular Material is an implementation of Material Design in Angular. This tag is for version 6.x of Angular Material for Angular 6. Do not use this tag for other versions 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 Material v6.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:

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

  • Mention the versions of Angular and Angular Material you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on plnkr.co or 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 Material's Github repository instead.)

Learn more

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

310 questions
9
votes
1 answer

Angular 6 Material Dialog Font Discrepancies and Material Icon Size Modification

I'm creating a sample app using material design as per what I've learned so far, but I noticed that the out of the box fonts for the material design are different for different components. For the material title element within a material dialog,…
ustad
  • 459
  • 1
  • 6
  • 21
9
votes
5 answers

angular material mat-select drop-down width

The current drop-down box has width greater than the the width of the line: Is there a way to get rid of the extra width? Here is my current code: html: …
Meng
  • 1,148
  • 5
  • 15
  • 23
9
votes
4 answers

Angular material badge position

I am trying implement angular material badge in my menu list. Is it possible to position the badge in the center of list item? Official document says : "By default, the badge will be placed above after. The direction can be changed by defining the…
Ante Ereš
  • 623
  • 4
  • 8
  • 24
9
votes
1 answer

How can I remove the select box from angular mat-menu?

I am using angular 6.1.3, and angular/material 6.4.5 (all in latest version) But when I run the following code, it always has a blue select box. I tried this on both chrome and IE, and both has the same problem. Is there any way to remove the blue…
Lang
  • 943
  • 13
  • 33
9
votes
2 answers

Mat table with ngFor and sorting

I have an mat-accordion with ngfor, when you click on the panel a table show up. Everything work as expected beside Mat sort, its only sort the first table. I read that i need to put template reference variable inside each table but how can i do…
Avihay m
  • 551
  • 1
  • 5
  • 22
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

Angular Material virtual scroll not rendering items in unit tests

I am using cdk-virtual-scroll-viewport + cdkVirtualFor in my component and it seems to work fine. However in the unit test of that component the items don't get rendered. I made a sample app based on this example and while the example works when…
moriesta
  • 1,170
  • 4
  • 19
  • 38
8
votes
3 answers

Angular 6 Material Table Sticky Header doesn't work

I need to make the Header of the mat-table component fixed to the top, But It doesn't work. I have Angular v6.1.7 and @angular/material v6.4.7. I added the "sticky: true" propertie to the matHeaderRowDef as someone mentions here but it doesn't do…
FrancoVP
  • 325
  • 3
  • 5
  • 14
8
votes
3 answers

mat-autocomplete auto-hide placeholder text on input focus

I am making use of the mat-autocomplete component with an input as per the examples in the docs, and I have configured the input to use a label and have non floating placeholder text like so:
mindparse
  • 6,115
  • 27
  • 90
  • 191
7
votes
2 answers

How to reduce the size of MatSelect DropDown Panel

I am trying to reduce the default size of mat-select drop-down panel, But unable to figure out how to do it I have tried giving width , have tried overriding panel class in angular mat-select, But the size doesn't seem to go down My Template File …
Harsh Nagalla
  • 1,198
  • 5
  • 14
  • 26
7
votes
1 answer

How to prevent material menu from closing without user permission in angular 7

I am having a mat-menu containing multiple checkboxes, and I want the user to close it when he checks all types of filter he wants. The actual behavior is when you click on anything it will be automatically closed. I have this code:
alim1990
  • 4,656
  • 12
  • 67
  • 130
6
votes
2 answers

Dynamically nested angular material menu

Please tell me how I can solve the following problem: I need to implement a dynamically created menu with different nesting levels depending on the data model object. At the moment, using recursion, we managed to create the menu as such, however,…
titaniche
  • 197
  • 1
  • 1
  • 10
6
votes
6 answers

Mat-select panel min-width

I'm trying to customize mat-select with multiple checkboxes. for some reason the panel get wrong min-width as below: and I don't know where its calculating this min-width. also I tried to add panelClass and override the min-width from this class,…
Tomer Aronovsky
  • 115
  • 2
  • 2
  • 9
6
votes
1 answer

Class extends MatTableDataSource and table with filtering

This is my hobby project and it has been stuck due of this issue for some time. It might be an easy issue, but my knowledge about Angular and JS is rather limited.. Nevertheless my code is below (I have shorten it a bit) and it is working to some…
KaljaTolkki
  • 133
  • 1
  • 7
6
votes
1 answer

Material grid list in Material grid tile possible (nested grids)?

I guess, it is not allowed to put a material grid in a material grid (nesting grids)? Can someone please confirm my assumption? (I am using Angular Material 6.) …
jasie
  • 2,192
  • 10
  • 39
  • 54
1
2
3
…
20 21