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
37
votes
10 answers

"export 'ɵɵinject' was not found in '@angular/core'

I am getting this error when i tried to use MatToolBar in my angular app. In browser I get Uncaught TypeError: Object(...) is not a function and also get warnings in the console: WARNING in ./node_modules/@angular/cdk/esm5/text-field.es5.js…
user11163978
37
votes
5 answers

How to use Angular7 (angular material) drag drop between two components

As recently angular introduced drag and drop in angular material https://material.angular.io/cdk/drag-drop/overview . All examples describes with in a single component. How to use this in two different components, Drag one component item and drop…
Jomy Joseph
  • 473
  • 1
  • 4
  • 6
37
votes
8 answers

Set mat-radio-button default selected in a mat-radio-group with angular2

I got this problem in my angular app. I have many options in a mat-radio-group but these are dynamically placed according to a json object. Something like this: This is the json object { "list": [ {"name": "some name 1", ID: "D1"}, …
Sergio Mendez
  • 1,311
  • 8
  • 33
  • 56
37
votes
2 answers

Dynamic nested Material menu from json object in Angular 5

How to create dynamic nested menu from json object? I started using Angular Material Design today for the first time and I'm trying to create nested menus using material design. The documentation is pretty straight forward for static stuff. But I…
rain01
  • 1,194
  • 1
  • 16
  • 25
37
votes
7 answers

Angular5 - TypeError: Cannot read property 'template' of undefined

I have added EDIT, DELETE and DETAILS buttons to each row in mat-table using Angular material@5.0.0-rc.2. All buttons are working but, * I am getting an error "Cannot read property 'template' of undefined" and * for each button click,…
Raghu M U
  • 1,265
  • 1
  • 9
  • 13
37
votes
3 answers

Angular material Datepicker get value on change

I'm using the new version of angular and angular material. I need to get the value of the datepicker at the moment the user change the date to then pass that value to a function and do something. datepicker
Miguel Frias
  • 2,544
  • 8
  • 32
  • 53
37
votes
8 answers

Get Angular Material theme color scheme/palette for other elements

I am building an application but I want to keep a consistent color scheme that can be changed with settings so I'm using Angular-Material, but I am not sure how to get the color scheme on elements that don't directly offer the ability to color them…
Cacoon
  • 2,467
  • 6
  • 28
  • 61
37
votes
6 answers

Overriding Angular Material Size and Styling of md-dialog-container

I am using Angular Material and I am using md-dialog for my popups for my gallery. The default animation and styling looks nice. However, I would like to change the width and height of size of the md-dialog-container? which is hidden. Only added…
codeRamen
  • 487
  • 2
  • 6
  • 12
37
votes
12 answers

How to overwrite angular 2 material styles?

I have this select in angular material: Its code : Descuentos
Kimy BF
  • 1,029
  • 3
  • 13
  • 23
37
votes
10 answers

Is it possible to make an md-button smaller?

I want my buttons showing left- and right arrow and NOW text to be as small as possible. How do I do that?
Andreas Selenwall
  • 5,705
  • 11
  • 45
  • 58
37
votes
7 answers

Create a menu like in AngularJs Material website

I want to create a menu that looks like the one in AngularJs Material website (https://material.angularjs.org) Unfortunately there is not documentation or demo to do that. Any ideas? Thanks
Claudio Ɯǝıs Mulas
  • 1,116
  • 3
  • 15
  • 24
36
votes
1 answer

Getting the error: Could not find column with id "id"

I'm trying to fill a mat-table with data but I get the error: Could not find column with id "id" when I try to do so. This is how I've done it in my component file: export class ListAllTrucksComponent { displayedColumns: string[] = ['id',…
Sinan Samet
  • 6,432
  • 12
  • 50
  • 93
36
votes
7 answers

Material table datasource filter with column value

How can I filter the material data table with specific column ? public dataSource; this.dataSource = new MatTableDataSource(this.items); this.dataSource.filterPredicate = function customFilter(data , filter:string ): boolean { …
bereket gebredingle
  • 12,064
  • 3
  • 36
  • 47
36
votes
12 answers

Checkbox angular material checked by default

I am trying to use an Angular Material checkbox, and set it by default as checked, but it is displayed as non-checked, what is wrong? …
ararb78
  • 1,137
  • 5
  • 19
  • 44
36
votes
8 answers

Tooltip issue, MatTooltip not working in Angular

I am trying to insert a notifications tooltip in my dashboard page, but the tooltip is not working. I am very new to Angular, so any leads regarding this will be highly appreciated. module.ts .. import {MatTooltipModule} from…
Soumyadip Chakraborty
  • 735
  • 2
  • 7
  • 10
1 2 3
…
99 100