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
2
votes
1 answer

Angular7 Modal StaticInjectorError when I try to open angular material dialog

Each time I click the Modal Button I get the error below. UserProfileDialog is my dialog component, Error: StaticInjectorError(AppModule)[UserProfileDialog -> InjectionToken MatDialogData]: StaticInjectorError(Platform: core)[UserProfileDialog…
Toheeb
  • 1,217
  • 1
  • 14
  • 26
2
votes
2 answers

How do I have multiple chip autocomplete on the same page using Angular material 7.1.1?

I'm using Angular 6 with Angular material 7.1.1 And i'm trying to use chip with auto complete. But the problem is that when i select one of the option, that gets applied to all the chips with autocomplete. `
John
  • 161
  • 1
  • 3
  • 7
2
votes
1 answer

Angular7 Material7 Grid List item order/flow not changing with flex-layout?

I have a material7 grid list component in my html and I just can't seem to manage to change the flow of it. I have items that are numbered showing in 2 columns and it just looks weird for them to flow as a row vs column. At first I had some issues…
SebastianG
  • 8,563
  • 8
  • 47
  • 111
2
votes
2 answers

How to get a custom MatFormFieldControl to reflect an invalid state

I've been following the angular-material docs which looks at creating a custom form field control: https://material.angular.io/guide/creating-a-custom-form-field-control It conveniently skips over a template and reactive forms full example so i've…
HGPB
  • 4,346
  • 8
  • 50
  • 86
2
votes
4 answers

StaticInjectorError(AppModule)[MatDialogTitle -> MatDialogRef]

Im familiar with this error but I only started seeing this after updating to Angular Material 6.4.7. All my modules refer to my own MaterialModule which exports MatDialogModule. I dont have any provider setup for MatDialogRef - havent needed to…
Jonesie
  • 6,997
  • 10
  • 48
  • 66
1
vote
0 answers

How to set default select values from drop down for multiple fields using mat-select-autocomplete

I'm using a custom plugin to display the custom form, which will show several dynamic multiple drop-down fields. However, I'm having trouble with the default value not being selected from the drop-down menu.
Pon Ilavarasan
  • 11
  • 2
1
vote
1 answer

dialogRef.close() is not a function opening from one component and closing from another component

I have below MatDialog export class ImportProcessingDialog extends AppComponentBase { constructor(public dialogRef: MatDialogRef) { super(injector); } onCloseClick(): void{ this.dialogRef.close(); …
San Jaisy
  • 15,327
  • 34
  • 171
  • 290
1
vote
1 answer

How to set limitation for mat checkbox in angular 14

Trying to set limitation for checkbox but not working. If i select more then 2 check box i want to not allow to select. I have tried but not working properly. If anyone knows please help to find the solutions. mauto.component.ts: toggleSelection =…
EMahan K
  • 417
  • 1
  • 19
1
vote
1 answer

How do I resolve missing dependencies for @angular/material

I have an angular project that, up till now, would build and run successfully. I wanted to add a modal and came across some articles about building a dialog with Angular Materials. The problem comes when I run ng serve. I get an error: PS…
USMC6072
  • 268
  • 2
  • 14
1
vote
1 answer

how to achieve custom progressbar in angular

I am trying to achieve following determinate progress bar with percentage inside and the fraction at the top of the progress percentage in angular. progress bar i want I saw material progress bar but not sure how can I achieve like the image.
Fazla Elahi Md Jubayer
  • 177
  • 2
  • 12
1
vote
2 answers

Overriding Angular Material components

I am trying to over ride the styles of font family so in that process i am able to over ride text fonts easily but i am not able to over ride the Angular Material components like input text, mat-table, mat-header, mat-cell, mat-row, etc. So my…
youeye
  • 737
  • 1
  • 7
  • 31
1
vote
0 answers

show previous month dates at the starting of current month

I just started with angular material and I came across using date-picker from angular material 7 and I want to know if is there any way to show previous month dates (as greyed out) in current month instead of empty space at the beginning?
Meet Patel
  • 11
  • 2
1
vote
2 answers

Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer

I'm trying to implement the [hasBackdrop]=true on my mat-drawer-container with multiple mat-drawers. My html structure is something like this:
Gustavo Scarpellini
  • 35
  • 1
  • 6
1
vote
0 answers

How to read value of angular material date picker using reactive form?

I am using the angular v-8 and angular-material v-8. I have created a reactive form inside the form I created a material date picker and when I try to read its value its gives me an object, not an exact value. Form field code…
Rk dev tech
  • 190
  • 1
  • 14
1
vote
1 answer

Highlight a particular week of a particular month in angular material DatePicker

I saw this example in the official website of angular material https://stackblitz.com/angular/xxjleavorkm?file=src%2Fapp%2Fdatepicker-date-class-example.ts How to select the dates dynamically like If I have scheduled a meeting of say October from…
kushal Baldev
  • 729
  • 1
  • 14
  • 37
1 2 3
…
10 11