Stack Overflow
Stack Overflow

Questions tagged [angular-material2]

Angular Material is an implementation of Material Design in Angular 2+. DO NOT use this tag for AngularJS Material questions.

Tag usage

This tag should be used for questions regarding the Angular Material framework, and is typically used in conjunction with the tag.

For the older (and now deprecated as of January 2022) AngularJS Material framework, do not use this tag - use the and tags instead.

Project info

Angular Material, now part of a suite of Angular components made by the Angular team, is an official implementation of Google's Material Design guidelines for Angular.

Angular Material is officially out. The Angular Material team will release patches as Angular progresses and will follow the versioning of Angular.

Links

Notes

Current release: 14.2.2

2957 questions
1
vote
1 answer

How to display maximum 5 cards in each row in angular material in NgFor Loop

I am getting around 1000 contacts array from api.I want to display it in contact card. However, I just want to display maximum 5 contact card in each row. I also, want to need a pagination like angular material paginator for this.
tanmay parmar
  • 279
  • 1
  • 4
  • 15
1
vote
1 answer

What is the fix to the following error while importing MatDialog component?

For the following import import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; I am getting the following error : ERROR in C:/Users/321806119/TableApp/node_modules/@angular/material/list/typings/list.d.ts (26,31): Type…
Devanshu Kashyap
  • 185
  • 1
  • 22
1
vote
1 answer

Ripple Effect is lost for child controls if [backgroundColor] Property is set for a mat-tab-group

Child Controls Loses Ripple Effect if [backgroundColor] property is set for mat-tab-group, is there any workaround.? Check this Stackblitz example to see the Issue
Pradeep
  • 581
  • 3
  • 11
  • 19
1
vote
2 answers

Using a custom Material Design theme to control standard component colours?

I have an angular 7 project with Angular Material. I am using one of the standard themes. I am trying to control the progress bar component to be able to set it to change colour from red to green depending on it's value. The only way I can see to…
George Edwards
  • 8,979
  • 20
  • 78
  • 161
1
vote
0 answers

Angular Material 2 mat-form-field offset property in IE 11

screenshot in IE 11 screenshot in Chrome Hi! I just insert the tag in my project. As you can see the first screenshot, I think there is a problem when rendering angular material mat-form-field element in IE 11. I want it to be shown like the chrome…
Y.Han
  • 47
  • 4
1
vote
0 answers

Angular 7 Material Drag&Drop with ngFor for multiple drop targets on same page

I'm having problems with getting multiple drop targets to work for Angular drag & drop. With just one source list and one target drop list it's working perfectly, here's the code: SOURCE box:
Matt
  • 3,206
  • 4
  • 24
  • 26
1
vote
1 answer

Ng If does not work in observable variable in Angular 6

I have integrated the Angular6 material data grid with server side pagination as per this link https://blog.angular-university.io/angular-material-data-table/ Here, I want to display the "No Data Found", if the data set is empty from the response. I…
Muthukumar Marichamy
  • 1,175
  • 1
  • 17
  • 39
1
vote
0 answers

Slow transitions of MatAccordion component in Internet Explorer 11

In my Angular application I have a form with a long list of checkboxes. To make the interface more clear, the options are presented in a dialog (using Material's MatDialog) and further separated into different categories by an accordion component…
stefanS
  • 312
  • 4
  • 17
1
vote
1 answer

dataSource.sort broken when *ngIf is applied on table to fix flicker

Regarding material table in angular 2 . In my ngonit() I have this.mydatasource.sort = this.sort. The sorting works but while the data is loading I briefly see the table header (flicker) and then whole table appears. As soon as I do a table…
Gullu
  • 3,477
  • 7
  • 43
  • 70
1
vote
0 answers

Updating custom CSS to latest Angular Material version

Scenario: I have an application which was using Angular 2 and Angular Material. I updated the project to Angular 7 and latest Material version using update guide and ng update. Problem: The problem is I was relying on some of the CSS the old…
dstr
  • 8,362
  • 12
  • 66
  • 106
1
vote
1 answer

Angular 5 Material Multi-level Carousel style SideNav Menu (no dropdown)

I managed to do that in my side with Angular Material, it worked with sub-menus that were deployed with dropdowns, but I'm looking for a way to make them not "Dropdowns", I'm looking for them to be like a kind of transition towards right, Something…
S. A
  • 493
  • 2
  • 6
  • 14
1
vote
1 answer

FormArray on save button click does not display mat error

I have a save button outside form. on save button click i want to display mat error. But it does not get displayed. I Tried using this.form.markAsDirty() & this.form.markASTouched() but nothing works.
Mayur Patil
  • 303
  • 3
  • 17
1
vote
0 answers

How can I remove the error state from a ?

I have a changePasswordForm: FormGroup which I want to display empty and without any error states after the user changed the password. After the REST call returns I also do the following: this.changePasswordForm.reset(); //…
Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
1
vote
4 answers

Override Default Functionality in Angular Material Expansion Panel Header

I am trying to override the default collapse and expand functionality for the Angular Material Expansion Panel. https://material.angular.io/components/expansion/overview By default the Expansion Panel will toggle expanding/collapsing if the mouse…
jptrue
  • 152
  • 1
  • 5
  • 15
1
vote
1 answer

Angular - toolbar being hidden by drawer instead of sidenav

I am trying to create a dashboard-like interface where there is a persistent title toolbar at the top, and a collapsible sidenav on the left side. I have been trying a number of things here and there and this is as close as I have…
NellaGnute
  • 225
  • 1
  • 6
  • 15
1 2 3
…
99
100