Stack Overflow
Stack Overflow

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
544
votes
11 answers

Can't bind to 'formControl' since it isn't a known property of 'input' - Angular2 Material Autocomplete issue

I am trying to use Angular Material Autocomplete component in my Angular 2 project. I added the following to my template.
Lahiru Chandima
  • 22,324
  • 22
  • 103
  • 179
181
votes
27 answers

Angular Material icons not working

I've installed Material for angular, I've imported on my app module MatIconModule (with import { MatIconModule } from '@angular/material/icon';) I've added it under my ngmodule imports with: @NgModule({ imports: [ //... MatIconModule,…
user9557542
165
votes
19 answers

Angular Material: mat-select not selecting default

I have a mat-select where the options are all objects defined in an array. I am trying to set the value to default to one of the options, however it is being left selected when the page renders. My typescript file contains: public options2 = [ …
William Moore
  • 3,844
  • 3
  • 23
  • 41
158
votes
17 answers

Apply a directive conditionally

I am using Material 2 to add md-raised-button. I want to apply this directive only if certain condition becomes true. For example: Another example: I created a basic dynamic reactive form in plunker. I am…
user2899728
  • 2,099
  • 4
  • 16
  • 28
157
votes
3 answers

How can I use custom theme palettes in Angular?

I want to use my company's brand colors throughout the app. I have found this issue: AngularJS 2 - Material design - set color palette where I can build an allegedly custom theme, but it's basically just using different parts of pre-built palettes.…
Narxx
  • 7,929
  • 5
  • 26
  • 34
148
votes
6 answers

Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material

I have a question regards Angular Material (with Angular 4+). Say in my component template I add a component, and within each step I have stepper buttons to navigate the component. Like…
Mike Sav
  • 14,805
  • 31
  • 98
  • 143
122
votes
16 answers

Angular Material 2 DataTable Sorting with nested objects

I have a normal Angular Material 2 DataTable with sort headers. All sort are headers work fine. Except for the one with an object as value. These doesn't sort at all. For example:
Roman
  • 3,011
  • 2
  • 20
  • 30
116
votes
4 answers

What is `cdk` in Angular Material 2 components

In multiple places within angular material source, there are elements/ css classes that have cdk as their prefix. Does anyone know what the abbreviation for cdk in angular material context?
Ashok Koyi
  • 5,327
  • 8
  • 41
  • 50
108
votes
11 answers

Angular Material - How to add a tooltip to a disabled button

I've noticed that the directive matTooltip doesn't work on a disabled button. How can I achieve it? Example: For an enabled…
Marcin Kunert
  • 5,596
  • 5
  • 26
  • 52
104
votes
4 answers

Disable auto focus in dialog- modal in Angular 2/ material

I'm using dialog from angular material-2. The problem is: I can't disable auto focus when modal-dialog is opened in iPhone or tablet especially. In iOS, it automatically focuses the first input field in the dialog! I tried with tab index and with…
Mohamad Arbash
  • 1,041
  • 2
  • 7
  • 6
99
votes
11 answers

'mat-form-field' is not a known element - Angular 5 & Material2

I'm trying to use in an Angular project using Material2 but I've hit a wall. Getting the error message below. Uncaught Error: Template parse errors: 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular…
user6885115
97
votes
6 answers

How to add icon to mat-icon-button

I am using Angular with Material I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for…
Alexander Mills
  • 90,741
  • 139
  • 482
  • 817
97
votes
8 answers

Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "

I have a component which is meant to be used in an Angular Material MdDialog : @Component({ ... }) export class MyComponent { constructor(@Inject(MAT_DIALOG_DATA) public data: any, public dialogRef: MdDialogRef) { ... } } I…
Wenneguen
  • 3,196
  • 3
  • 13
  • 23
92
votes
9 answers

Angular-Material DateTime Picker Component?

I imported a date picker in a project and was wondering if there was any official recent component from angular and material to include time in the calendar as well. I've seen plenty of time pickers in material documentation and researched a lot of…
Kevin Curnow
  • 929
  • 1
  • 6
  • 5
92
votes
8 answers

How to set the color of an icon in Angular Material?

I have this, which I would assume to work, but doesn't: home Then, I also have:
1
2 3
…
99 100