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.
angular-material
19,868
questions
513
votes
43
answers
771k
views
mat-form-field must contain a MatFormFieldControl
We are trying to build our own form-field-Components at our Company. We are trying to wrap material design's Components like this:
field:
<mat-form-field>
<ng-content></ng-content&...
- 6,039
245
votes
11
answers
164k
views
Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?
I am trying to follow the docs on https://material.angular.io/components/component/dialog but I cannot understand why it has the below issue?
I added the below on my component:
@Component({
...
- 77.4k
240
votes
29
answers
422k
views
Angular + Material - How to refresh a data source (mat-table)
I am using a mat-table to list the content of the users chosen languages. They can also add new languages using dialog panel. After they added a language and returned back. I want my datasource to ...
- 19.2k
235
votes
3
answers
246k
views
Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
I am currently working on password reset page of an Angular 4 project. We are using Angular Material to create the dialog, however, when the client clicks out of the dialog, it will close ...
- 4,681
191
votes
28
answers
263k
views
Angular Material icons not working
I've installed Material for angular,
I've imported on my app module MatIconModule (with import { MatIconModule } from '@angular/material/icon';)
I've added it under my ngmodule imports with:
@...
user9557542
189
votes
1
answer
130k
views
Choosing bootstrap vs material design [closed]
I'm going to start new project using AngularJS (full stack). My project needs to be responsive and I'll be creating templates from scratch.
So I need an advice on whether to choose bootstrap 3 (with ...
- 7,977
182
votes
16
answers
420k
views
How to set width of mat-table column in angular?
Here in my mat-table have 6 column when any column has not more words then it looks like Image-1, but when any column has more words then UI looks like Image-2, so how to set UI like Image-1 when any ...
- 5,863
177
votes
15
answers
165k
views
@angular/material/index.d.ts' is not a module
With Angular 8, While building the app, we encounter the following error:
app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306:
File ...node_modules/@angular/material/index....
- 17.9k
176
votes
4
answers
404k
views
Is there an official or exhaustive list of all mat-icons in Angular?
I have started using <mat-icon> from Angular Material, and I'm wondering if there is any official list of the names of all the included icons. A few months ago I found a page where a bunch of ...
- 1,962
172
votes
4
answers
263k
views
Angular 2 ngfor first, last, index loop
I'm trying to set as default the first occurrence in this example: plunkr
getting the following error:
Unhandled Promise rejection: Template parse errors:
TypeError: Cannot read property '...
- 2,557
169
votes
18
answers
162k
views
Apply a directive conditionally
I am using Material 2 to add md-raised-button. I want to apply this directive only if certain condition becomes true.
For example:
<button md-raised-button="true"></button>
Another ...
- 2,209
166
votes
34
answers
197k
views
Mat-table Sorting Demo not Working
I am trying to get the mat-table sorting to work locally, and while I can get the data to show up as expected, clicking on the header row does not do the sorting as it does on online examples (nothing ...
- 4,861
165
votes
13
answers
197k
views
Default sorting in Angular Material - Sort header
How can I change Angular Material code below, so that data-table is sorted by 'name' column, ascending order by default. Arrow (indicating current sort direction) must be displayed.
This is what I ...
- 1,892
157
votes
22
answers
258k
views
Can't bind to 'dataSource' since it isn't a known property of 'table'
I am new in angular 5 development. I am trying to develop a data table with angular material using the example provided here: "https://material.angular.io/components/table/examples".
I am getting an ...
- 2,651
154
votes
8
answers
172k
views
Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material
I have a question regards Angular Material (with Angular 4+). Say in my component template I add a <mat-horizontal-stepper> component, and within each step <mat-step> I have stepper ...
- 15.2k
140
votes
7
answers
179k
views
Property 'controls' does not exist on type 'AbstractControl' Angular 4 [duplicate]
I am trying a nested reactive form in Angular 4. It is working fine but when I try to build AOT it's throwing the error
'controls' does not exist on type 'AbstractControl'
I googled and tried few ...
- 5,746
139
votes
15
answers
185k
views
Property 'fName' comes from an index signature, so it must be accessed with ['fName']
These are my files. I am getting this error can someone help me.
Error: src/app/app.component.html:5:123 - error TS4111: Property 'fName' comes from an index signature, so it must be accessed with ['...
- 1,503
129
votes
21
answers
227k
views
NullInjectorError: No provider for MatDialogRef
I can't inject MatDialogRef as it described in documentation: https://material.angular.io/components/dialog/overview
When i'm trying to do it i'v got error:
ERROR Error: StaticInjectorError[...
- 1,816
127
votes
20
answers
401k
views
Set default option in mat-select
I have a simple select option form field in my Angular material project:
component.html
<mat-form-field>
<mat-select [(value)]="modeSelect" placeholder="Mode">
...
- 6,647
126
votes
27
answers
218k
views
How to change height in mat-form-field
How can I change height in mat-form-field with appearance="outline"?
I need to reduce the mat-form-field.
My input example
- 2,674
124
votes
7
answers
237k
views
How to pass data to dialog of angular material 2
I am using dialog box of angular material2.
I want to pass data to the opened component. Here is how I am opening dialog box on click of a button
let dialogRef = this.dialog.open(DialogComponent, {
...
- 15.4k
122
votes
24
answers
127k
views
How to remove space bottom mat-form-field
I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.
- 1,832
122
votes
7
answers
160k
views
Angular material: MatDatepicker: No provider found for DateAdapter
I'm trying to use the Datepicker component in Angular Material. Here is my HTML code:
<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker ...
- 1,685
113
votes
14
answers
149k
views
Angular 5 FormGroup reset doesn't reset validators
I have a form on my page and when I call FormGroup.reset() it sets the forms class to ng-pristine ng-untouched but FormControl.hasError(...) still returns truthy. What am I doing wrong here?
Template
&...
- 8,531
109
votes
13
answers
285k
views
Confirm password validation in Angular 6 [duplicate]
I want to perform password and confirm password validations using material components only,and an error message below the confirm password field if confirm password field doesn't match And if it is ...
- 2,457
107
votes
13
answers
158k
views
How to change mat-icon size in Material
This question comes from the Material2 Github repo.
I still have problems to style a Material component that is wrapped in a custom component.
I have a <logo> component that contains <md-...
- 4,373
103
votes
9
answers
111k
views
Angular Material and Jasmine : " No provider for InjectionToken MdDialogData! "
I have a component which is meant to be used in an Angular Material MdDialog :
@Component({
...
})
export class MyComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, public ...
- 3,356
103
votes
6
answers
282k
views
How to add icon to mat-icon-button
I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't ...
- 97.2k
102
votes
38
answers
161k
views
Angular MatPaginator doesn`t get initialized
I have 2 components. Both have mat-table and paginators and pagination is working for one component and not working for the other component though the code is similar. Below is my html:
<div class=&...
- 2,285
101
votes
8
answers
242k
views
How to set the color of an icon in Angular Material?
I have this, which I would assume to work, but doesn't:
<mat-icon color="white">home</mat-icon>
Then, I also have:
<button mat-raised-button color="accent" type="submit"
[disabled]="...
- 1,663
99
votes
7
answers
164k
views
Angular Material and changing fonts
Just wondering how I can change default fonts in Angular Material ...
The default is Roboto and I couldn't find a way to change this to different font.
- 4,520
98
votes
11
answers
283k
views
Styling mat-select in Angular Material
How to style mat-select's panel component. From the docs I get that I need to provide panelClass so I make it like this:
<mat-form-field>
<mat-select placeholder="Search for"
[(...
- 5,256
92
votes
20
answers
223k
views
How to change Mat-Datepicker date format to DD/MM/YYYY in simplest way?
I'm setting up a mat-datepicker for DOB and traditionally the display format is MM/DD/YYYY,I need to change it to DD/MM/YYYY with less coding
I tried format tag in mat-date picker but it does not work,...
92
votes
8
answers
168k
views
Template parse errors: 'mat-icon' is not a known element
I'm working with Angular CLI and angular material v.5.2.5
and trying to use
mat-icon-button
but such an error produced by the console:
Uncaught Error: Template parse errors: 'mat-icon' is not a ...
- 1,539
92
votes
8
answers
143k
views
Programmatically select mat-tab in Angular 2 material using mat-tab-group
How can I select a specific tab when an event occurs?
I tried with [selectedIndex]="selectedTab" changing the selectedTab to the tab index needed but it doesn't seems to work after the tabs are ...
- 1,723
84
votes
6
answers
165k
views
how to pass data from angular material dialog to parent component?
I'm using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user's data and then I have two buttons to submit and cancel. I tried to show my form's data in the ...
- 1,835
82
votes
11
answers
237k
views
How to use paginator from material angular?
I'm new to angular and trying to implement pagination in my app. I am trying to use this material component.
With the code below, I can get length, pagesize, and pageSizeOptions in my .ts file
<md-...
- 7,851
82
votes
6
answers
86k
views
Using Bootstrap for Angular and Material design for Angular together
I'm working on a project with this template.
The template is written using AngularJs and Bootstrap-UI (bootstrap for angular) and I would like to include some Material Design elements like cards and ...
- 849
79
votes
16
answers
75k
views
How to translate mat-paginator in Angular 4?
Do you have any ideas how can I translate "Items per page" in Angular's mat-paginator tag? The mat-paginator is an element from Material Design.
- 1,217
79
votes
10
answers
140k
views
SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;
I created an Angular project using the CLI. I'm using SCSS, and I included Angular Material with a custom theme iirc. I added a couple dummy components, and the app still built fine. Then I needed to ...
- 1,624
77
votes
11
answers
98k
views
How can I get Angular Material Icon to show the outline in my Angular app? [duplicate]
I currently have
<mat-icon>info<mat-icon>
which gives the output of the info icon with the color filled. However, I just want the outline of the icon. How do I do that?
The icon I want ...
- 4,967
77
votes
13
answers
241k
views
File Upload with Angular Material
I'm writing an web app with AngularJS and angular-material. The problem is that there's no built-in component for file input in angular-material. (I feel that file uploading doesn't fit the material ...
- 1,308
74
votes
4
answers
103k
views
Angular Material Table Dynamic Columns without model
I need to use angular material table without model, because I don't know what will come from service.
So I am initializing my MatTableDataSource and displayedColumns dynamically in component like that ...
- 2,000
72
votes
12
answers
56k
views
How to use MatPaginatorIntl?
I'm using MatPaginator component and I'm trying to figure out how to translate those labels (documentation isn't clear enough about this).
I've found this article showing how to do this and I ...
- 3,608
71
votes
13
answers
112k
views
MatToolbar throws error when using it with Angular 9
Angular version 9.2.0
When I import the MatToolbarModule in a module and use it in the html template, then I get the following error message:
This likely means that the library (@angular/material/...
- 5,061
71
votes
4
answers
38k
views
Angular 12 'ng serve' builds apps slowly, almost like production builds
I've just migrated an app from Angular 11.2.7 to Angular 12. Everything runs fine, except that when I am developing and using 'ng serve', rebuild times are much, much slower now, to the point where it'...
- 5,963
69
votes
4
answers
202k
views
onselected event in md-select in Angular 4
I would like call a function in typescript on choosing a value using md-select. What is the property used for this purpose in material design ?
<md-select placeholder="State">
<md-...
- 747
68
votes
11
answers
158k
views
How to use input type file in angular material
How to use input type file in angular material
Hi, I am using angular material for designing. when i go on angular material site there no input type file element. anyone know about this.
- 1,490
68
votes
2
answers
41k
views
What's the difference between BrowserAnimationsModule and NoopAnimationsModule?
With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states:
Some ...
- 3,704
67
votes
11
answers
235k
views
How to import Angular Material in project?
I have installed Angular Material Design. Now I try to add this in app.module.ts file:
import { MaterialModule } from '@angular/material';
What I should decify in section: imports: []? that to load ...
- 11.8k