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
479
votes
43 answers

mat-form-field must contain a MatFormFieldControl

We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this: field: {{hint}}…
Viktor Eriksson
  • 5,677
  • 3
  • 20
  • 24
244
votes
11 answers

Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?

I am trying to follow the docs on https://material.angular.io/components/component/dialog but I cannot understand why it has the below issue? I added the below on my component: @Component({ selector: 'dialog-result-example-dialog', templateUrl:…
Tampa
  • 75,446
  • 119
  • 278
  • 425
228
votes
29 answers

Angular + Material - How to refresh a data source (mat-table)

I am using a mat-table to list the content of the users chosen languages. They can also add new languages using dialog panel. After they added a language and returned back. I want my datasource to refresh to show the changes they made. I initialize…
Kay
  • 17,906
  • 63
  • 162
  • 270
221
votes
3 answers

Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)

I am currently working on password reset page of an Angular 4 project. We are using Angular Material to create the dialog, however, when the client clicks out of the dialog, it will close automatically. Is there a way to avoid the dialog close until…
Terry Zhang
  • 4,541
  • 8
  • 23
  • 29
189
votes
1 answer

Choosing bootstrap vs material design

I'm going to start new project using AngularJS (full stack). My project needs to be responsive and I'll be creating templates from scratch. So I need an advice on whether to choose bootstrap 3 (with angular directives) or material design for…
Asik
  • 7,967
  • 4
  • 28
  • 34
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
175
votes
15 answers

@angular/material/index.d.ts' is not a module

With Angular 8, While building the app, we encounter the following error: app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306: File ...node_modules/@angular/material/index.d.ts' is not a module.
ForestG
  • 17,538
  • 14
  • 52
  • 86
168
votes
16 answers

How to set width of mat-table column in angular?

Here in my mat-table have 6 column when any column has not more words then it looks like Image-1, but when any column has more words then UI looks like Image-2, so how to set UI like Image-1 when any column has more words in angular 6…
Dharmesh
  • 5,383
  • 17
  • 46
  • 62
163
votes
33 answers

Mat-table Sorting Demo not Working

I am trying to get the mat-table sorting to work locally, and while I can get the data to show up as expected, clicking on the header row does not do the sorting as it does on online examples (nothing happens at all). I am trying to get this demo…
avern
  • 4,741
  • 3
  • 11
  • 16
161
votes
4 answers

Angular 2 ngfor first, last, index loop

I'm trying to set as default the first occurrence in this example: plunkr getting the following error: Unhandled Promise rejection: Template parse errors: TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup"> …
PriNcee
  • 2,436
  • 3
  • 17
  • 21
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
154
votes
13 answers

Default sorting in Angular Material - Sort header

How can I change Angular Material code below, so that data-table is sorted by 'name' column, ascending order by default. Arrow (indicating current sort direction) must be displayed. This is what I want to achieve: Original code:
Jacek Kościesza
  • 1,782
  • 2
  • 12
  • 11
148
votes
21 answers

Can't bind to 'dataSource' since it isn't a known property of 'table'

I am new in angular 5 development. I am trying to develop a data table with angular material using the example provided here: "https://material.angular.io/components/table/examples". I am getting an error saying Can't bind to 'dataSource' since it…
Rahul Munjal
  • 2,551
  • 2
  • 15
  • 35
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
147
votes
3 answers

Is there an official or exhaustive list of all mat-icons in Angular?

I have started using from Angular Material, and I'm wondering if there is any official list of the names of all the included icons. A few months ago I found a page where a bunch of them were listed, but not all of them, and this site is…
Pablo
  • 1,672
  • 2
  • 9
  • 13
1
2 3
…
99 100