Stack Overflow
Stack Overflow

Questions tagged [angular-material]

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
  • 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:

19273 questions
42
votes
14 answers

How to open and close Angular mat menu on hover

This question is in reference to this Github issue, with mat-menu which can't be toggled using mouse hover, I am basically trying to replace a bootstrap based horizontal navigation menu with angular material's menu. The only thing keeping me from…
Saif
  • 1,745
  • 5
  • 23
  • 46
42
votes
6 answers

Angular - Remove mat-expansion-panel border & box-shadow

Is there any way to remove the border, I think it's the box-shadow of a mat-expansion-panel from Angular Material? I want it to be all white, so you only would see Text and expansion arrow
Sergi
  • 743
  • 1
  • 9
  • 17
42
votes
8 answers

Angular 6 MatTable Performance in 1000 rows

I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance become very slow I even can't write in textboxes. I tried…
mostafa cs
  • 718
  • 1
  • 8
  • 16
42
votes
5 answers

Angular Material 2 - How to lock mat-toolbar and mat-tabs to the top

For my Website I'm attempting to lock the < Mat-Toolbar > to the top of the screen and then directly under that I want to lock the < Mat-Tabs > . The issue I'm running into is that position: fixed in CSS is not locking it at all, and when I actually…
Daniel Turcich
  • 1,764
  • 2
  • 26
  • 48
42
votes
14 answers

Angular matSort does not sort

I'm having trouble with importing matSort into my matTable. I'm providing you with my code: dashboard.component.ts import {Component, ViewChild} from '@angular/core'; import {UserService} from "../user.service"; import {DohvatMantisaService} from…
Vinko Vorih
  • 2,112
  • 2
  • 14
  • 22
41
votes
7 answers

How to set color of toggle buttons

I have group of toggle buttons. They are very light and disappear in the background on poor monitors with a high brightness level. How can I properly style them? I would prefer to assign them the accent or primary colors, the way you can do it for…
Codo
  • 75,595
  • 17
  • 168
  • 206
41
votes
7 answers

No provider for MatDialogRef

I am using material 2 version 2.0.0-beta.12. I need to adjust the position of the material Modal. I followed this answer to do that. https://stackoverflow.com/a/44238699/8253445 Since MdDialog is not available now I used {MatDialog, MatDialogRef,…
kashif roshen
  • 435
  • 1
  • 5
  • 9
41
votes
3 answers

Template parse errors: 'md-form-field' is not a known element

I am using Angular 4 and Angular Material 2. For the following code :
Suvonkar
  • 2,440
  • 12
  • 34
  • 44
40
votes
3 answers

No provider for MatSnackBar error when trying to run "ng test"

So I'm trying to run "ng test" on my Angular 4 Angular CLI. I'm having many problems such as the UI not loading any helpful message if a test fails, but fortunately the console works. Anyways, this error is occuring saying I did not give MatSnackBar…
Sarah
  • 669
  • 2
  • 8
  • 21
40
votes
6 answers

angular material 2 table header center alignment

If md-sort-header is added into md-header-cell in md-table, it is always left-alignment. How to center-align header cells, such "name"? Name plnkr
Yong
  • 1,107
  • 1
  • 12
  • 21
39
votes
9 answers

Angular Material. to highlight a table row on mouse over

we are using Angular Material table for our app: https://material.angular.io/components/table/overview could you please to show how to highlight a row on mouse hover?
Vladyslav Plakhuta
  • 1,379
  • 2
  • 10
  • 15
39
votes
4 answers

custom filter in mat-table

I'm using mat-table. It has a filter which works fine with doc example: From https://material.angular.io/components/table/overview, the original code is:
cucuru
  • 3,456
  • 8
  • 40
  • 74
39
votes
10 answers

Implement a search filter for the component of angular material

Trying to implement a simple application in angular 2 using angular material.I implemented a simple table with pagination . I also used mat-select component, but for this i want implement a search filter to type and search the required option from…
Heena
  • 1,691
  • 13
  • 37
  • 56
39
votes
4 answers

"Edit / Delete" button for each row & header column is 'Action' in the md-table component

I am quite new in the angular 4 world and I'm trying to add "Edit / Delete" button for each row & header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column & buttons…
Sundhar
  • 449
  • 1
  • 5
  • 9
38
votes
11 answers

angular 8 material dialog close button with X top right

I am trying to get my material dialog to have an X button at the top right, but I am having problems with the positioning. component.ts this.d.open(loginComponent, { width: '300px', height: '', panelClass:…
Jonathan
  • 3,893
  • 5
  • 46
  • 77
1 2 3
…
99 100