Stack Overflow
Stack Overflow

Questions tagged [angular-material-7]

Angular Material2 is an implementation of Material Design in Angular. This tag is for version 7.x of Angular Material2 for Angular 7. Do not use this tag for other versions (e.g. v5, v6) 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 Material2 v7.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:

Our 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 Material2 that you're using.
  • Reduce your issue to a small example
  • Post a reduced working code on 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 Material2's Github repository instead.)

Learn more

To learn more about Angular Material, visit the following resources to help you get started:

162 questions
3
votes
2 answers

Customize angular material mat-menu-item to show items smaller in size (both width and height)

I am working on an angular application using angular material components. In a grid, I have inline actions that should be supported (which can edit, delete and many more actions). Currently when I embed the mat-menu component in the grid, the items…
svijay.aug12
  • 531
  • 3
  • 13
  • 32
3
votes
1 answer

mat-select: Programmatically pre-selecting items

I am trying to figure out how to display a mat-select in a dialog and have some of the mat-options preselected. I've created a simple example to demonstrate what I want to do: StackBlitz In my example, I want to display a selectable list of colors,…
James A Cubeta
  • 61
  • 1
  • 9
3
votes
3 answers

How to assign custom values to mat-checkbox?

I want to attach my status field with mat-checkbox and want to get the value in the form of a string as we use to get in Material-1. I am looking for an alternative of ng-true-value="'ACTIVE'" ng-false-value="'INACTIVE'" in Material-7.
Sandeep Kumar
  • 2,397
  • 5
  • 30
  • 37
3
votes
1 answer

ERROR TypeError: jit_nodeValue_11(...) is not a function at Object.eval [as handleEvent] (HomeComponent.html:77)

I am using Anugular 7 and angular material. I am currently getting an error when trying to submit a form via (ngsubmit)="changePassword(formData)" The other ngSubmits on the page are working without issue on submit. Just wondering if anyone has had…
Lewis
  • 481
  • 2
  • 8
  • 16
3
votes
2 answers

Getting an error while using angular material mat-select with reactive form

I am trying to use angular material mat-select with reactive forms and getting an error as "No value accessor for form control with name: 'productUnitofMeasure'". The other FormControls are working fine here, I have included all the required modules…
ironman
  • 946
  • 14
  • 23
2
votes
1 answer

Angular Material Date picker. How to show only years from range (Ex: i need to show only the dates from 1950 to now) remaining years shouldn't show

I am using Angular material Datepicker for date selection in My project. can anyone have a Solution to show years from a particular range. Ex: I want to show years from 1950 in my Material Date Picker. years before 1950 should be removed from…
Santosh Raju
  • 156
  • 2
  • 13
2
votes
4 answers

how to access properties of a component inside a angular material pop up/dialog component?

I am opening one dialog from my component. const dialogRef = this.dialog.open(DialogOverviewExampleDialog, { width: '500px', data: DialogData }); dialogRef.afterClosed().subscribe(result => { …
Rajesh Kumar
  • 363
  • 2
  • 5
  • 13
2
votes
4 answers

When sorting a Angular Material table can you view the data without modifying it?

Angular Material table utilizes a MatTableDataSource method called sortData() to sort the table's data source. (https://material.angular.io/components/table/api#MatTableDataSource). It is an arrow function: sortData: ((data: T[], sort: MatSort) =>…
ebakunin
  • 3,621
  • 7
  • 30
  • 49
2
votes
1 answer

mat-table skip to specific row programmatically

I am implementing a table by a mat-table component of angular material. I want to skip to a specific row when some event in my code fired. I tried so far to use the event of (focus) on row and virtual scrolling. But I think that I missing something…
Ezri Y
  • 407
  • 3
  • 15
2
votes
3 answers

Put traingle on top of mat menu

I have my menu as follows. how i can put a triangle upwards to my dropdown menu.
2
votes
4 answers

Invert "checked" value of a mat-checkbox

When a Angular Material mat-checkbox (https://material.angular.io/components/checkbox/overview) is checked it has the value "true". When it is unchecked it has the value "false". Is there a way to turn this behaviour around? I need just the…
tobias47n9e
  • 2,233
  • 3
  • 28
  • 54
2
votes
1 answer

How can I get the value/content of a custom component inside mat-table?

I want to build a custom table with mat-table where for the last column and for every row I want to define a custom component. This works. But the custom components are for some input, so the user can select some options or type something…
burhangoeksen
  • 23
  • 6
2
votes
0 answers

Angular material drag and drop over item, not between

I would like to add members to groups by dragging them over the specified group, however, the default behavior of angular material drag and drop is that it's placing items between other elements. Currently, I have a list of groups and the second…
shaelex
  • 251
  • 3
  • 17
2
votes
1 answer

Angular 7 App styling broken in Safari, Opera & IE, fine in Chrome, Firefox, Vivaldi & Edge

I am working on an app for work on both Mac and Windows machines. I am using a *ngFor to loop through a list of menu items which have icons attached. I have placed a class on each individual menu item so I can style them. Parent…
Bwizard
  • 955
  • 2
  • 15
  • 36
2
votes
3 answers

'router-outlet' in MatDialog is not working in Angular 7

I am trying to use within an Angular Material popup dialog. However, the router-outlet part does not render anything, or log anything to the console. If I add the to the HTML content of…
Mike Coxeter
  • 589
  • 1
  • 6
  • 18
1 2
3
…
10 11