Stack Overflow
Stack Overflow

Questions tagged [angular-material-6]

Angular Material is an implementation of Material Design in Angular. This tag is for version 6.x of Angular Material for Angular 6. Do not use this tag for other versions or 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 v6.x
  • 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:

310 questions
97
votes
5 answers

Angular6 Material6 Error: "There can only be one default row without a when predicate function."

I'm trying to implement the Table with expandable rows from https://material.angular.io/components/table/examples but I get this error: There can only be one default row without a when predicate function. This error comes from the fact that I have…
GoTo
  • 5,966
  • 2
  • 28
  • 31
29
votes
4 answers

Why mat-error not get displayed inside mat-form field in angular material 6 withcustom global validators

i am using angular material 6 ,i have a vaidation inside mat-form-field mat-error is not displayed , when move after mat-form-field to the mat-error which is displaying properly. Not Working code:
Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71
22
votes
8 answers

Cannot read property 'ngMetadataName' of undefined

I am using Angular 6 with Angular Material. After updating to the latest version, the console is throwing this error in development. On Production it is working Cannot read property 'ngMetadataName' of undefined It occurs when I am trying to open…
Aslam
  • 9,204
  • 4
  • 35
  • 51
21
votes
1 answer

Angular AutoComplete is returning value as [Object Object]

My requirement was to show the selected value in the Input Box and get the Selected Id and Value to the .ts file. As I need the Id and Value I am binding the option value directly to [value]. But if I do that it's getting printed as [Object…
Gvs Akhil
  • 2,165
  • 2
  • 16
  • 33
13
votes
5 answers

Getting list of selected values from Angular 6 mat-selection-list

How do I get the list of all values selected from Angular material mat selection list in the component. The example given shows values to be displayed in the template but not in component. I am trying to modify the solution given in this question…
Abhay Kumar
  • 833
  • 3
  • 11
  • 24
13
votes
1 answer

Can we use both angular material and bootstrap together for an angular project?

Can we use both angular material and bootstrap together for a angular project? Is there something that should I know?
Janitha Rasanga
  • 1,010
  • 1
  • 11
  • 20
12
votes
6 answers

Angular mat-table pagination not working, entire data is loaded on First page of mat-table

I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too. I have tried…
Jayant Belekar
  • 243
  • 1
  • 3
  • 9
12
votes
2 answers

The correct method of updating a MatTableDataSource in Angular 2 version 6

I have a listing that uses the mat-table component which is fed by the MatTableDataSource. in the component.html in the component.ts dataSource = new MatTableDataSource(); when I click to delete…
Adamski
  • 839
  • 2
  • 10
  • 28
11
votes
2 answers

Hide Arrows From mat-form-field in Angular Material

I am using mat-form-field for telephone number input. Here is my base code for that.
user15819941
11
votes
4 answers

Angular mat-autocomplete : How to display the option name and not the value in the input

I'm using the mat-autocomplete widget under my Angular app :
firasKoubaa
  • 6,439
  • 25
  • 79
  • 148
11
votes
2 answers

angular material stepper add new step items dynamically on every click

I am using angular material in my project. I want to add extra stepper item(mat-step) on every click of addItem button. I created a plunker here. https://stackblitz.com/edit/angular-enmq1z?file=app%2Fstepper-overview-example.ts Can anyone help me…
Anji
  • 689
  • 1
  • 5
  • 24
11
votes
3 answers

How to set color of active item in mat-nav-list in angular 6

I am new to angular 6 ,here I have a mat-toolbar with mat-sidenav .Everything is working well but I want to set a color for the active item in side nav menu. currently I have BLACK background I want to set a color when I select the item in the…
Zhu
  • 3,679
  • 14
  • 45
  • 76
10
votes
2 answers

Angular Testing for Angular-Material on Mat-Menu

I'm trying to write a test for my mat-menu in my application's toolbar. When I call button.click() in my test, I get a Cannot read property 'templateRef' of undefined error in the console. As all works find in the browser, I believe this is to do…
TobyGWilliams
  • 631
  • 1
  • 5
  • 17
10
votes
1 answer

Material Dialog gets stuck when called onClick of leaflet Marker

I have a project where i have a map (using ngx-leaflet ). On click on a marker i want to show a Dialog from Angular Material. The Dialog opens but when i click on the close button, it reopens again and then closes. What i tried: Delaying the dialog…
Joniras
  • 1,258
  • 10
  • 32
9
votes
2 answers

Confirm message before closing material dialog accidentally in Angular?

How can i use of beforeClose() method to show a confirmation message before closing the material dialog ? this.dialogRef.beforeClose().subscribe(result => { var cn = confirm('You have begun editing fields for this user. …
Ashish Kumar
  • 143
  • 1
  • 1
  • 8
1
2 3
…
20 21