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,718
questions
505
votes
43
answers
743k
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&...
- 5,959
245
votes
11
answers
163k
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({
...
- 76.8k
237
votes
29
answers
412k
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 ...
- 18.9k
230
votes
3
answers
238k
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,631
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
188
votes
28
answers
252k
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
176
votes
15
answers
163k
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.7k
176
votes
16
answers
407k
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,713
168
votes
4
answers
255k
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,506
166
votes
17
answers
156k
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,179
165
votes
4
answers
373k
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,852
164
votes
34
answers
192k
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,821
161
votes
13
answers
192k
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,852
154
votes
22
answers
252k
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,621
152
votes
8
answers
168k
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.1k
137
votes
7
answers
174k
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,686
132
votes
15
answers
172k
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,433
127
votes
21
answers
218k
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,778
126
votes
19
answers
388k
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,587
122
votes
7
answers
231k
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.2k
120
votes
27
answers
207k
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,614
119
votes
7
answers
153k
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,655
113
votes
14
answers
146k
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,463
109
votes
23
answers
118k
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,704
109
votes
13
answers
283k
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,427
106
votes
12
answers
155k
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,333
101
votes
36
answers
155k
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,275
101
votes
8
answers
107k
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,326
101
votes
8
answers
234k
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
100
votes
6
answers
275k
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 ...
- 94.9k
98
votes
7
answers
157k
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,500
97
votes
11
answers
275k
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,196
91
votes
8
answers
139k
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,713
90
votes
8
answers
163k
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,499
85
votes
18
answers
210k
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,...
84
votes
6
answers
160k
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,815
82
votes
6
answers
85k
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
81
votes
11
answers
231k
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,711
78
votes
16
answers
74k
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,197
77
votes
8
answers
127k
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,616
76
votes
13
answers
236k
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,298
74
votes
11
answers
91k
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,887
74
votes
4
answers
101k
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
55k
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,578
71
votes
13
answers
109k
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/...
- 4,953
69
votes
4
answers
37k
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,791
68
votes
11
answers
232k
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.7k
68
votes
2
answers
40k
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,694
67
votes
4
answers
197k
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-...
- 727
67
votes
11
answers
152k
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,480