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
33
votes
8 answers

'mat-toolbar' is not a known element - Angular 5

I have created a new project, and I am trying to add angular-material. I have created material.module.ts in my app folder: import { NgModule } from '@angular/core'; import { MatButtonModule, MatMenuModule, MatIconModule, …
bellotas
  • 2,349
  • 8
  • 29
  • 60
33
votes
5 answers

Wrapping a FormControl in Angular (2+)

I'm trying to create a custom form control in Angular (v5). The custom control is essentially a wrapper around an Angular Material component, but with some extra stuff going on. I've read various tutorials on implementing ControlValueAccessor, but I…
Tom Seldon
  • 510
  • 1
  • 6
  • 10
33
votes
2 answers

Material radio button change event Angular 4

I am trying to use the change output of an md-radio-buttons as follows: {{a}} …
Batters
  • 729
  • 1
  • 7
  • 19
33
votes
9 answers

Customize Angular Material 2 Tooltip styles

In AngularJS is possible to style tooltips in CSS using the selector .md-tooltip What is the way to have custom format tooltips in Angular 4? EDIT: I am using Angular 4 & Material2. An example of how I am using it is:
Nizam
  • 4,569
  • 3
  • 43
  • 60
33
votes
6 answers

Overriding the encapsulated CSS of external component

I was wondering how to override the encapsulated CSS of an external component. So I am using material2 in my project and the tabs component has a the attribute overflow set on tab-body. Is it possible to override the overflow value?
Salma Hamed
  • 2,000
  • 4
  • 26
  • 45
32
votes
7 answers

Set width on input mat-form-fields for angular material

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code: person.component.html
kroe761
  • 3,296
  • 9
  • 52
  • 81
32
votes
1 answer

Editing Angular Material's Table Cell Padding

When I inspect the element with developer tools it shows zero padding, but when I look a it and mouse over it, it very clearly has padding within the cell. I have no idea where this is coming from, and setting td { padding: 0 !important } does…
yoursweater
  • 1,883
  • 3
  • 19
  • 41
32
votes
3 answers

How to create a custom color theme with angular5 and angular materials

I have been following the angular/material documentation for how to create a custom theme, followed other blogs, and checked various stack overflow similar questions, but cant seem to get this working. I have the following styles.css,…
slipperypete
  • 5,358
  • 17
  • 59
  • 99
32
votes
6 answers

How to toggle Angular material expansion panel programmatically

I just started working on an Angular 4 project with material design. I am currently working with the expansion component, the API states that a disabled expansion panel can't be toggled by the user, but can still be manipulated programmatically. I…
hY8vVpf3tyR57Xib
  • 3,574
  • 8
  • 41
  • 86
32
votes
1 answer

Angular 4.3.6 animations not working properly

After migrating from Angular 4.3.5 to 4.3.6 something with animations went bad (with 4.3.5 was everything alright). The problem is that, when the application starts, the login component is loaded, and that component has fadeIn animation to show up.…
Null
  • 518
  • 7
  • 13
32
votes
5 answers

text-align in md-grid-tile (Angular Material) doesn't work

text-align in Angular Material doesn't work. {{video.created}} {{video.code {{ video.title…
rabun
  • 345
  • 1
  • 3
  • 8
32
votes
12 answers

How do I change the color of an md-icon in Angular Material?

I started to use Angular Material in my project and I was wondering how I can change the svg color inside an am-button. This is my code:
maryum375
  • 727
  • 1
  • 10
  • 22
31
votes
10 answers

Add Angular Material to Nx Workspace

I'm wanting to add angular-material to my nx-workspace. The angular material docs (https://material.angular.io/guide/getting-started) say I should run ng add @angular/material. I've tried that in the root of my nx workspace, as well as in an…
vicatcu
  • 5,407
  • 7
  • 41
  • 65
31
votes
2 answers

Upgrading to angular 9 - @angular/flex-layout peer dependency to @angular/cdk

I encountered following the error whilst updating from angular 8 to 9 and running ng update @angular/material: Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/cdk" (requires "^8.0.0-rc.0", would install "9.0.0").
Andrew Allen
  • 6,512
  • 5
  • 30
  • 73
31
votes
6 answers

Reorder mat-table rows with angular material's drag-and-drop

Angular 7 brought the powerful DragDropModule with it: https://material.angular.io/cdk/drag-drop/examples The documentation deals with rearranging items within lists or transferring items between several lists. However, it doesn't talk about…
David Brem
  • 504
  • 2
  • 6
  • 16
1 2 3
…
99 100