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
67
votes
2 answers

What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states: Some Material components depend on the Angular…
OddDev
  • 3,644
  • 5
  • 30
  • 53
66
votes
11 answers

How can I get Angular Material Icon to show the outline in my Angular app?

I currently have info which gives the output of the info icon with the color filled. However, I just want the outline of the icon. How do I do that? The icon I want is https://material.io/tools/icons/?icon=info&style=outline…
zer0
  • 4,657
  • 7
  • 28
  • 49
66
votes
4 answers

onselected event in md-select in Angular 4

I would like call a function in typescript on choosing a value using md-select. What is the property used for this purpose in material design ? {{…
Karthik Kumar
  • 717
  • 1
  • 7
  • 16
64
votes
7 answers

How to mat-button-toggle by default selected in angular

How can I set default selected last button in toggle group. This is my code. Heritage
Hossein Bajan
  • 2,644
  • 5
  • 19
  • 36
63
votes
6 answers

How to add click event on mat-row in angular material table

I added this but when inspecting element using Chrome DevTools, the click function doesn't show! Here's my code:
Vyas Reddy
  • 1,226
  • 1
  • 13
  • 24
63
votes
6 answers

angular 2 material matTooltip multiline

I'm new to Angular 2 Material. What's the preferred way to make a tool tip multi-line? For example, I might have the following tool tip: AA BBBBBBBBBB CCCC DDDDD And, I may want to to have it display in a multi-line format like this: AA BBBBBBBBBB…
Jonas
  • 3,969
  • 2
  • 25
  • 30
63
votes
6 answers

Get rid of white space around Angular Material modal dialog

I want to get rid of the white space in my Angular Material modal dialog. How do I style the css so I can't see any white? My css so far: app-commission-me-dialog { margin: 0px; padding: 0px; } .mat-dialog-container { margin: 0px; …
Davtho1983
  • 3,827
  • 8
  • 54
  • 105
62
votes
5 answers

Could not find HammerJS in angular 6

I use angular-material in my project. I am getting this warnings: Could not find HammerJS. Certain Angular Material components may not work correctly. The "longpress" event cannot be bound because Hammer.JS is not loaded and no custom loader has…
PGH
  • 2,164
  • 9
  • 34
  • 62
61
votes
10 answers

How to use input type file in angular material

How to use input type file in angular material Hi, I am using angular material for designing. when i go on angular material site there no input type file element. anyone know about this.
Hariom Singh
  • 1,420
  • 1
  • 8
  • 21
61
votes
25 answers

Angular Material mat-spinner custom color

Does anyone know how can I change mat-spinner color in Angular Material? Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there. I want it to be my custom color, not color…
mavrise
  • 611
  • 1
  • 5
  • 5
61
votes
7 answers

Angular Materials: Can you disable the autocomplete suggestions for an input?

I'm just using simple input containers such as this The input field is suggesting previously…
Bryce Rogers
  • 668
  • 1
  • 5
  • 8
60
votes
8 answers

Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'

I'm getting following error when I try to test an angular component: Error while running jest tests: Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'. Here is my html:
60
votes
14 answers

angular material stepper: disable header navigation

I want to navigate the stepper only through the next and back buttons. I can't get this to work since users can also click each step label to navigate to any step. I can't use linear, since it requires each step to have a formArray or FormGroup. I…
Shaniqwa
  • 1,924
  • 2
  • 17
  • 29
59
votes
7 answers

How to align button right inside Dialog angular material?

I want align button right corner of the dialog below is my html

What's your favorite animal?

user9450118
59
votes
9 answers

'mat-label' is not a known element Error in latest Angular Material

I got an error in my Angular Material: compiler.js:466 Uncaught Error: Template parse errors: 'mat-label' is not a known element: 1. If 'mat-label' is an Angular component, then verify that it is part of this module. 2. If 'mat-label' is a Web…
Randz67
  • 817
  • 1
  • 9
  • 13