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
51
votes
13 answers

How to hide/delete underline input Angular Material?

I have input element in Angular Material: When input has focus it displays underline. How to hide or remove that? Seem I need to set null for underlineRef?
Daniel
  • 1,695
  • 6
  • 23
  • 41
51
votes
10 answers

How to use Material Design Icons In Angular 4?

I want to use the icons from https://materialdesignicons.com/ in my angular 4 project. The instructions on the website are only covering how to include it in Angular 1.x (https://materialdesignicons.com/getting-started) How can I include the…
Matthias Herrmann
  • 2,650
  • 5
  • 32
  • 66
50
votes
7 answers

Angular Material customize tab

I'm using angular 4 and I'm using Angular Material. How can I fully customize the background color when (not-selected /…
Desu
  • 840
  • 1
  • 11
  • 17
50
votes
11 answers

Get validators present in FormGroup/FormControl

I'm using Material 2 in my app, but in this question I want to solve a problem specifically with Input. As you can see in API Reference there's a property bind called required, which shows as asterisk in the placeholder. So, I'm wondering if there's…
dev_054
  • 3,448
  • 8
  • 29
  • 56
50
votes
5 answers

How can I pass a service variable into an Angular Material dialog?

For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?
ethan
  • 1,881
  • 2
  • 17
  • 31
48
votes
7 answers

Set value of programmatically

I'm trying to set the value of 2 fields and programmatically. For text input everything works as expected however for the on the view this field is just like it would have a value of null. But if I would…
46
votes
9 answers

Cannot find module '@angular/material-moment-adapter'

Why is this not working? I try importing the MomentDateAdapter as shown on the angular website but Visual Studio Code keeps complaining it cant find @angular/material-moment-adapter. What am I doing wrong? version info: Angular CLI: 1.5.0 Node:…
Curtis
  • 3,170
  • 7
  • 28
  • 44
43
votes
8 answers

Angular CDK: How to set Inputs in a ComponentPortal

I would like to use the new Portal from material CDK to inject dynamic content in multiple part of a form. I have a complex form structure and the goal is to have a form that specify multiple place where sub components could (or not) inject…
JoG
  • 962
  • 2
  • 11
  • 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
6 answers

How to enable and disable a mat-button based on a select form

This is my mat-button: How can I control it and make it disabled or not based on whether a select form is emtry or not? Here is my field form:
Cap Barracudas
  • 2,347
  • 4
  • 23
  • 54
42
votes
4 answers

Display custom validator error with mat-error

I come to you for talking about a problem with angular material. In fact, I think it's an issue, but I prefer looking for a misunterstanding first. The first thing about my problem is the context, i try to do a simple form containing two inputs : a…
Pouette
  • 423
  • 1
  • 5
  • 8
42
votes
3 answers

Disable (make read-only) text input on mat-datepicker when using a reactive form

I am using Angular Material 2's mat-datepicker and want the input element disabled so the user cannot edit the value using the text input. There are detailed instructions in the Angular Material 2 docs on how to disable different parts of the…
nclarx
  • 847
  • 1
  • 8
  • 18
41
votes
8 answers

Angular 4 Material - mat-button style not being applied in mat-dialog component

I want to create a mat-dialog with a default-style mat-button for closing the dialog. Everything works except the button lacks the Material Design style applied by Angular Material. How do I get the style to show? AFAIK I have imported all modules…
GreatHam
  • 1,656
  • 3
  • 16
  • 21
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