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
32
votes
6 answers

Select All mat option and deselect All

I have scenario as below: I want to achieve is: When user click on All then all options shall be selected and when user click All again then all options shall be deselcted. If All option is checked and user click any other checkbox than All then…
Gags
  • 3,759
  • 8
  • 49
  • 96
32
votes
2 answers

Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

I am new to material 2 and I have implemented mat table and in which I have click event on row to open dialog and there is also a menu button in last column "Action" but on clicking on button it also open dialog box instead of opening menu. Table …
31
votes
2 answers

MAT_DATE_FORMATS definition/meaning of fields

Material example for customizing-the-parse-and-display-formats for date picker uses custom MAT_DATE_FORMATS export const MY_FORMATS = { parse: { dateInput: 'LL', }, display: { dateInput: 'LL', monthYearLabel: 'MMM YYYY', …
Abhishek Jha
  • 935
  • 2
  • 10
  • 22
31
votes
4 answers

Angular Material: Hide Autocomplete Panel when User hits enter Key

I'm currently working on a table where the user is able to tab through editable elements by pressing enter. I also use Angular Material in this. I have a mat-form-field with several dynamically created input fields with the mat-autocomplete element.…
Ekos
  • 685
  • 2
  • 9
  • 18
31
votes
3 answers

MatDialog Error: No provider for InjectionToken mat-dialog-scroll-strategy

By including Provider: MatDialog in the Constructur constructor(groupService: GroupService, public dialog: MatDialog) {} I get following error at runtime Error: No provider for InjectionToken mat-dialog-scroll-strategy! I have included the…
Krosan
  • 684
  • 1
  • 6
  • 15
31
votes
4 answers

Returning Data from MdDialog in Angular Material 2

I am using a MdDialogModule to show a Dialog window with an input field in it. The Modal is opening fine and I am able to enter text into input field and submit, but on clicking the Submit button, I want the data in the Input form to be returned to…
Hisham Mubarak
  • 1,559
  • 3
  • 22
  • 28
31
votes
7 answers

Angular 2/4 How to style angular material design snackbar

I am new to Angular2/4 and angular typescript. I want to style the angular material design snackbar for example change the background color from black and font color to something else. How do i go about styling the "snackbar" ? I have the material…
user244394
  • 13,168
  • 24
  • 81
  • 138
31
votes
4 answers

does angular material have a grid system?

I'm starting a project with angular material. Does it have a native system for positioning elements in a responive grid like bootstrap does ? Otherwise is it ok practice to combine material design with bootstrap for the grid system ? Maybe I am…
Lev
  • 13,856
  • 14
  • 52
  • 84
31
votes
5 answers

Angular 2 How to "watch" for tab changes

I have:

Some tab content

Some more tab content

...

I need to catch an event when a…
Igor Tikhonenko
  • 353
  • 1
  • 4
  • 11
30
votes
8 answers

Angular Material Style Class not working

I'm using Angular Material to add Date Picker to my app. For some reason the angular material is not applying the original angular material styles. How it displays in my app: How it SHOULD display: What I have done: npm install --save…
Skywalker
  • 4,984
  • 16
  • 57
  • 122
30
votes
3 answers

Angular Material 2 table server-side pagination

I am trying to Achieve Angular Material 2, MatPaginator server side paging. How can I achieve that? Below is the code example: