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
52
votes
6 answers

Material Angular Accordion header/title height

So I've been trying to adopt Materials Accordion in my Web Application development. However having some troubles getting the header to expand in size as the content grows. My header is expected to have quite a few number of lines to give a summary…
Alex Sim
  • 617
  • 1
  • 6
  • 13
52
votes
4 answers

Calling renderRows() on Angular Material Table

I'm trying to get my Angular Table to refresh after updating the data used in the table. The docs say "you can trigger an update to the table's rendered rows by calling its renderRows() method." but it is not like a normal child component where I…
av0000
  • 1,917
  • 6
  • 31
  • 51
52
votes
7 answers

Angular 5 Mat-grid list responsive

i created grid list with column 6 and i want to be grid title take 100% width on small screen devices. Now it creates 6 column on small screens as well Expected: One grid-title occupies 100% of space on mobile device only
Somnath Swami
  • 591
  • 1
  • 4
  • 13
52
votes
10 answers

Angular Material - show mat-error on button click

I am trying to do validation using the and . This works fine when user tabs out of the input without filling. But how do I force this error to show when I click a button? I am not using submit. Also, using template-driven…
ganeshk
  • 5,583
  • 3
  • 27
  • 31
51
votes
4 answers

Mat-icon does not center in its div

I am very new to css and I cannot align the mat-icon (the thought bubble) to the div class=img (the green square on the left) - see the attached image. At this moment the icon is a little bit near the top For adding the svg icon I used Material…
Mike Me
  • 2,192
  • 3
  • 20
  • 32
51
votes
10 answers

Cannot disable matInput element with [formControlName]

I'm using matInput and mat-form-field (@angular/material) in an Angular component, and I can't disable the matInput. A working example can be seen here. It seems likely that I'm missing something obvious, but for the life of me I can't figure out…
John
  • 9,249
  • 5
  • 44
  • 76
51
votes
12 answers

How to disable a text area or mat-form-field

I am using Angular (4) + Angular Material and Reactive Forms for my Form Field. How can I disable that? I tried to google for things like disabled="true" or something like that. May can you show me the right syntax? That must be easy. Thanks! my…
dafna
  • 893
  • 2
  • 10
  • 21
50
votes
5 answers

Angular: create is deprecated: use new Observable() instead

I recently updated my version of angular using ng update and when running ng lint I am getting the error create is deprecated: use new Observable() instead this.data$ = Observable.create(t => { t.next(this.model); t.complete(); }); What…
mruanova
  • 6,351
  • 6
  • 37
  • 55
50
votes
3 answers

Binding an Angular Material Selection List

I am creating a Toolbar with a selection list (checkboxes with each list item) using Angular Material 2. I just cannot figure out how to set the checkboxes before the list is displayed and then get the selected items following user interaction. I am…
TDC
  • 1,869
  • 3
  • 25
  • 40
50
votes
7 answers

Angular Material customize tab

I'm using angular 4 and I'm using Angular Material. How can I fully customize the background color when (not-selected /…
Desu
  • 840
  • 1
  • 11
  • 17
50
votes
5 answers

How can I pass a service variable into an Angular Material dialog?

For mdDialog, how do I pass in variable? Specifically, how to inject an Angular service into the dialog component?
ethan
  • 1,881
  • 2
  • 17
  • 31
50
votes
20 answers

angular-material change checkbox color

I'm using checkbox of angular-material2. Currently the default color of checkbox is coming as purple color. Looks like they have changed default color of checkbox from "primary" to accent. Is there a way to get "primary"(green) color instead of…
Krishna
  • 1,865
  • 4
  • 18
  • 26
49
votes
6 answers

Can't get angular-material md-sidenav to be 100% height

I'm making a new angular2 application using angular2-material with a sidenav. And I can't for the life of me get that sidenav to have a height of 100%. I'm trying to get a menu to slide out that takes up the whole height of the screen. And I want…
Alex Kibler
  • 4,674
  • 9
  • 44
  • 74
48
votes
5 answers

Getting error "mat-nav-list is not a known element"

Getting error "mat-nav-list is not a known element" , used @angular/material" version "^5.2.5"
Godwin Raj
  • 501
  • 1
  • 4
  • 5
48
votes
5 answers

How to bind default value in mat-radio-group angular reactive forms

In my case it needs to active option 01 as default selection. It is working with checked=true property, but value is not binding with the formControlName="options", it is binding when user select any option. if no any user selection options value…
Dimuthu
  • 1,611
  • 1
  • 14
  • 16
1 2 3
…
99 100