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
47
votes
3 answers

Angular Mat Select Multiple selectionchange finding which option was changed

I have a with the multiple option set (a multi-select). When the selectionChange event fires I need to know which option has been checked or unchecked, however, it only returns the new current list of selected options. For instance I…
Curtis
  • 3,170
  • 7
  • 28
  • 44
47
votes
12 answers

Angular 6 error show to 'mat-form-field' is not a known element:

Hi I am using angular 6 and my code is as follows: import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import {…
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
46
votes
1 answer

In Angular Material what does setting up global typography styles mean?

When using ng add @angular/material to add Material support to an Angular project there is a prompt Set up global Angular Material typography styles? What does this even mean? The documentation states the prompt appears, but does not describe what…
Neutrino
  • 8,496
  • 4
  • 57
  • 83
46
votes
7 answers

Angular 6 Material Data Table with Fixed Header and Paginator

How to make the Header of Data Table component fixed to the top, and the Paginator fixed to the bottom? This is my HTML:
Chris K
  • 820
  • 3
  • 10
  • 18
46
votes
10 answers

Angular custom style to mat-dialog

I am trying to customize the default "mat-dialog" in Angular 5. What I want to achieve is having a toolbar in the upper part of the dialog, which should cover the whole width. However, the mat-dialog-container has a fixed padding of 24px which I…
Ardenne
  • 897
  • 2
  • 13
  • 23
46
votes
2 answers

How to position elements to the right in md-toolbar?

I am using FAB speed dial within a toolbar. However I am unable to have it floating to the right of the toolbar. I've tried float: right with no luck. Also, tried flex offset="55", but this doesn't work when the window is resized. Essentially,…
Ka Tech
  • 8,937
  • 14
  • 53
  • 78
45
votes
5 answers

Angular Material editable table using FormArray

I'm trying to build an inline editable table using the latest material+cdk for angular. Question How can I make mat-table use [formGroupName] so that the form fields can be referenced by its correct form path? This is what I got so far: Complete…
Øystein Amundsen
  • 3,993
  • 8
  • 44
  • 63
44
votes
2 answers

Angular material Error when mat-checkbox is imported

I'm having some troubles with Angular Material, I've tried a lot of solutions but none of them work. This is what I'm trying to do : I'm using Angular Material with Reactive Forms to make a register form, everything was fine until I added a…
Daniela Cortes
  • 565
  • 1
  • 5
  • 10
44
votes
5 answers

Angular: How to mock MatDialogRef while testing

I have a DialogComponent that has the following constructor where Dialog is a custom object: constructor( public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: Dialog ) I created the following TestBed…
suku
  • 10,507
  • 16
  • 75
  • 120
44
votes
7 answers

I just installed Angular Material and Angular Animations in my project and got these errors

I just ran the code: npm install --save @angular/material @angular/animations This is my package.json { "name": "cerpnew", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", …
John
  • 972
  • 1
  • 7
  • 24
43
votes
6 answers

'mat-card' is not a known element in Angular 7

I've seen a lot of questions on this but doesn't seem to be the same issue Im encountering. I have just created my 2nd angular project. I have a new component under src/app/employees where I am trying to use in employees.component.html . The error…
Woody
  • 1,677
  • 7
  • 26
  • 32
43
votes
5 answers

Angular Material - matIcon in MatSelect

I use this angular material select in my Angular 5 application: …
quma
  • 5,233
  • 26
  • 80
  • 146
43
votes
5 answers

How to customize mat-select dropdown position?

Its been couple of days since i have not found the solution for this. As there is an option for mat-menu that is overlaptrigger property but there is no property to perform this in mat select dropdown. Is there any way to customize the mat-select…
Sumit Khanduri
  • 3,619
  • 7
  • 30
  • 40
43
votes
4 answers

How can I position a dialog above the triggering button?

I'm about to put a fist through my PC screen. I have a dialog box that refuses to budge a hot inch above my submit button at the bottom of the screen -- I want it at the very top. I have made sure my theme is loading. That was validated here: I…
Tom L'esperance
  • 764
  • 1
  • 6
  • 17
42
votes
5 answers

How to use the MatTableDataSource with an observable?

I am using the mat-table and I am trying to use the MatTableDataSource with an observable (I get the data from a web service), but I don't know how to configure the MatTableDataSource to use an observable instead of an array. Is the only solution to…
Christoph Hummler
  • 971
  • 2
  • 7
  • 20
1 2 3
…
99 100