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
59
votes
13 answers

Change format of md-datepicker in Angular Material with momentjs

Angular material introduced a new date picker component found here. I want the date returned by this component to be in the format yyy-mm-dd but I am not sure how is this done. By searching I found that $mdDateLocaleProvider can be used, but I could…
dearn44
  • 3,198
  • 4
  • 30
  • 63
58
votes
8 answers

Open/Close sidenav from another component

I use angular (latest version) and angular material. There are 3 components: header.component, in which there is a control button for right-sidenav rigth-sidenav.component, in which is the right-sidenav sidenav.component (this is the left main…
Denis
  • 583
  • 1
  • 4
  • 7
58
votes
5 answers

Passing data to mdDialog

Main listing page has edit button. Which opens details of the edited row. Way-1: Now, if I set "ctrl.parent.q_details.client_location" it is bind with parent listing controller and it works as 2-way binding and automatically changes the values as…
TechCare99
  • 1,763
  • 6
  • 24
  • 33
57
votes
5 answers

Get checked status on click event in angular Material

I have a angular element Here onchange(which actually gives…
Apoorv
  • 1,338
  • 1
  • 17
  • 18
57
votes
12 answers

Change size of mat-icon-button

How can I change mat-icon-button size? My icon has 24px now and I would like to increase that value to 48px. I use mat-icon as a button content. I also noticed that mat-icon-button has just hardcoded 40px/40px size.
57
votes
12 answers

Set font size of Angular Material Tooltip

I am very new to web development, and I cannot figure out how to solve the following issue, although it may be very easy. I am using Angular 4 and Angular Material to implement tooltips like this:
GLR
  • 1,070
  • 1
  • 11
  • 29
56
votes
1 answer

Angular - How can I write a condition in interpolation?

I have a table which is being populated through the add client form. It works fine and the changes are displayed. The thing is I have a select list in which a user selects the specific source and then it is saved in ngmodel. Here is the code. Select…
Usman Iqbal
  • 2,379
  • 5
  • 26
  • 50
55
votes
5 answers

Expandable table rows in angular 4 with angular material

How would you make rows expandable in angular material tables? One requirement is that I need to be using the angular material table. I would also prefer to use the material accordion to the information provided here. I want to click on row and show…
Simon
  • 1,681
  • 1
  • 21
  • 34
54
votes
6 answers

Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular

I have just copied and pasted angular material code for datePicker and input, but I am getting this error for the datePicker. app.module import {MaterialModule} from '@angular/material'; @NgModule({ imports:…
edkeveked
  • 17,989
  • 10
  • 55
  • 93
54
votes
12 answers

Angular2 Material Dialog css, dialog size

Angular2 material team recently released the MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md I'd like to change the looking and feel about the angular2 material's dialog. For example, to change the fixed size of…
ethan
  • 1,881
  • 2
  • 17
  • 31
54
votes
9 answers

how can I change the color of Toast depends on message type in Angular material $mdToast?

While using $mdToast.simple().content("some test") it is showing the toast with black color. how can I change that color to red, yellow and so, depends on the type of the error messages like error, warning and success. Similar question as this.
Rafiu
  • 4,700
  • 6
  • 25
  • 27
53
votes
10 answers

How to use scrollStrategy in MatDialog?

I tried to make a scroll for a dialog in reposition strategy, but it doesn't work for me. const scrollStrategy = this.overlay.scrollStrategies.reposition(); const dialogRef = this.dialog.open( DialogOverviewExampleDialog, { scrollStrategy } ); The…
constantant
  • 1,192
  • 1
  • 13
  • 25
53
votes
4 answers

How can i make a MatDialog draggable / Angular Material

Is it possible to make a Angular Material Dialog draggable? I installed angular2-draggable and can of course use the functionality on all other elements. But because the dialogs are dynamically created i can not use ngDraggable on a special element…
HansDampfHH
  • 575
  • 1
  • 4
  • 10
53
votes
8 answers

How to add line breaks within tooltip in angular material design

How to add line break in tooltip I have implemented the Tooltip but i am not able to add multi line or line breaks in tooltip.Below is my code http://codepen.io/apps4any/pen/RWQLyr Html
apps4any
  • 603
  • 1
  • 6
  • 6
52
votes
8 answers

error TS1086: An accessor cannot be declared in an ambient context in Angular 9

I'm learning Angular Material and I'm getting this error when importing { MatButtonModule } from "@angular/material/button". From what I read in other answers, it looks like package compatibility issues but I couldn't fix it. Here's the full…
Pablo Aguirre de Souza
  • 3,939
  • 4
  • 14
  • 30
1 2 3
…
99 100