Questions tagged [angular-material2]

Angular Material is an implementation of Material Design in Angular 2+. DO NOT use this tag for AngularJS Material questions.

Tag usage

This tag should be used for questions regarding the Angular Material framework, and is typically used in conjunction with the tag.

For the older (and now deprecated as of January 2022) AngularJS Material framework, do not use this tag - use the and tags instead.

Project info

Angular Material, now part of a suite of Angular components made by the Angular team, is an official implementation of Google's Material Design guidelines for Angular.

Angular Material is officially out. The Angular Material team will release patches as Angular progresses and will follow the versioning of Angular.

Links

Notes

Current release: 14.2.2

2957 questions
41
votes
3 answers

angular material 2 date picker auto open on focus

How angular material 2 date picker can be configured to be opened automatically on focus? I didn't find anything in the documentation at https://material.angular.io/components/datepicker/overview. Current html is like this:
mehran
  • 1,314
  • 4
  • 19
  • 33
41
votes
4 answers

Angular Material 2 - Disable Ripple?

I'm currently working with md-tab-group (just updated to latest version yesterday)... Does anyone know if it is possible to disable/configure Ripple on existing components (md-tab-group in this case)? Latest version causes my tab headers to jump…
Cleudi
  • 411
  • 1
  • 4
  • 3
41
votes
2 answers

Material design component "is not a known element" in Angular2

I have a hybrid Angular1 and Angular2 application. In one of the Angular2 components that I route to, I want to use a Material Design Button. When I insert a button into the template like this foo the application starts…
Klas Mellbourn
  • 42,571
  • 24
  • 140
  • 158
40
votes
4 answers

How to open mat-menu programmatically?

Im trying to trigger opening a menu when clicking mat-nav-list item. HTML
{{ i.name }}

Shift 'n Tab
  • 8,808
  • 12
  • 73
  • 117
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
6 answers

Change language of Datepicker of Material Angular 4

How to Change language of Datepicker of Material Angular? I can't find in documentation for Angular material 2. Here is a plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview
Melchia
  • 22,578
  • 22
  • 103
  • 117
39
votes
2 answers

Get Angular Material v2 slider's value while sliding

I am using Angular Material v2 md-slider in a component @Component({ selector: 'ha-light', template: ` {{myValue}}`, …
marekb
  • 793
  • 2
  • 7
  • 9
37
votes
5 answers

How to change angular material datepicker format

This is the format of date I am getting when I am using angular material datepicker....Wed Nov 21 2018 00:00:00 GMT+0530 (India Standard Time) But I need date in (YYYY-MM-DD) or (YYYY-MM-DDTHH:mm) this format. this is model class I am using to…
mmodalities
  • 405
  • 1
  • 4
  • 6
37
votes
5 answers

Angular material Paginator is not working

I am trying to add Angular Material Paginator on my app. MatPaginatorModule added in module.
Umar Farooq Aslam
  • 485
  • 1
  • 8
  • 17
37
votes
7 answers

Angular5 - TypeError: Cannot read property 'template' of undefined

I have added EDIT, DELETE and DETAILS buttons to each row in mat-table using Angular material@5.0.0-rc.2. All buttons are working but, * I am getting an error "Cannot read property 'template' of undefined" and * for each button click,…
Raghu M U
  • 1,265
  • 1
  • 9
  • 13
37
votes
8 answers

How to update angular material

What is the best way to update angular material in a project to latest version material@2.0.0-alpha.8-3 ? I tried: npm install --save @angular/material @angular/cdk
Kram_
  • 763
  • 2
  • 6
  • 12
37
votes
6 answers

Overriding Angular Material Size and Styling of md-dialog-container

I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container? which is hidden. Only added…
codeRamen
  • 487
  • 2
  • 6
  • 12
37
votes
1 answer

How to define an elevation in angular material 2?

the md-toolbar in angular-material 2 doesn't have a shadow. I want to define for my toolbar
drtapha
  • 539
  • 1
  • 7
  • 15