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
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:
89
votes
7 answers

Programmatically select mat-tab in Angular 2 material using mat-tab-group

How can I select a specific tab when an event occurs? I tried with [selectedIndex]="selectedTab" changing the selectedTab to the tab index needed but it doesn't seems to work after the tabs are loaded.
Filipe Amaral
  • 1,683
  • 1
  • 14
  • 15
83
votes
8 answers

Template parse errors: 'mat-icon' is not a known element

I'm working with Angular CLI and angular material v.5.2.5 and trying to use mat-icon-button but such an error produced by the console: Uncaught Error: Template parse errors: 'mat-icon' is not a known element... if I…
Vladyslav Plakhuta
  • 1,379
  • 2
  • 10
  • 15
82
votes
6 answers

Using Bootstrap for Angular and Material design for Angular together

I'm working on a project with this template. The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and others. Is it possible to do that? is it…
Felipe Millan
  • 849
  • 1
  • 6
  • 5
78
votes
15 answers

How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?

I'm setting up a mat-datepicker for DOB and traditionally the display format is MM/DD/YYYY,I need to change it to DD/MM/YYYY with less coding I tried format tag in mat-date picker but it does not work,other date pickers like ngbDatepicker format can…
Zeeshan Chaudhary
  • 803
  • 1
  • 6
  • 9
77
votes
6 answers

how to pass data from angular material dialog to parent component?

I'm using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user's data and then I have two buttons to submit and cancel. I tried to show my form's data in the console but it returns undefined! whats the…
fariba.j
  • 1,737
  • 7
  • 23
  • 42
76
votes
14 answers

How to translate mat-paginator in Angular 4?

Do you have any ideas how can I translate "Items per page" in Angular's mat-paginator tag? The mat-paginator is an element from Material Design.
bigmeister
  • 1,137
  • 3
  • 13
  • 20
76
votes
11 answers

How to use paginator from material angular?

I'm new to angular and trying to implement pagination in my app. I am trying to use this material component. With the code below, I can get length, pagesize, and pageSizeOptions in my .ts file
Drunken Daddy
  • 7,326
  • 14
  • 70
  • 104
73
votes
13 answers

File Upload with Angular Material

I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material design, but I need it in my app) Do you have a…
WreckingBall
  • 1,268
  • 2
  • 10
  • 15
72
votes
4 answers

Angular Material Table Dynamic Columns without model

I need to use angular material table without model, because I don't know what will come from service. So I am initializing my MatTableDataSource and displayedColumns dynamically in component like that : TableComponent : ngOnInit()…
mevaka
  • 1,980
  • 2
  • 17
  • 24
70
votes
12 answers

How to use MatPaginatorIntl?

I'm using MatPaginator component and I'm trying to figure out how to translate those labels (documentation isn't clear enough about this). I've found this article showing how to do this and I followed the steps: 1 - I created a file called…
dev_054
  • 3,448
  • 8
  • 29
  • 56
69
votes
4 answers

Angular 12 'ng serve' builds apps slowly, almost like production builds

I've just migrated an app from Angular 11.2.7 to Angular 12. Everything runs fine, except that when I am developing and using 'ng serve', rebuild times are much, much slower now, to the point where it's frustrating. I'm on an M1 iMac, using node…
John
  • 5,581
  • 6
  • 29
  • 46
68
votes
8 answers

SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;

I created an Angular project using the CLI. I'm using SCSS, and I included Angular Material with a custom theme iirc. I added a couple dummy components, and the app still built fine. Then I needed to style my components using Angular Material. In…
Mathew Alden
  • 1,458
  • 2
  • 15
  • 34
67
votes
13 answers

MatToolbar throws error when using it with Angular 9

Angular version 9.2.0 When I import the MatToolbarModule in a module and use it in the html template, then I get the following error message: This likely means that the library (@angular/material/toolbar) which declares MatToolbarModule has not…
Ling Vu
  • 4,740
  • 5
  • 24
  • 45
67
votes
11 answers

How to import Angular Material in project?

I have installed Angular Material Design. Now I try to add this in app.module.ts file: import { MaterialModule } from '@angular/material'; What I should decify in section: imports: []? that to load all material entities. I tried: imports:…
POV
  • 11,293
  • 34
  • 107
  • 201
1 2
3
…
99 100