For those who prefer to use SCSS: Install the font $> npm install material-design-icons import in src/styles.scss @import ‘~material-design-icons/iconfont/material-icons.css’; and use it in HTML as described here <!– write the desired icon as text-node –> <i class=”material-icons”>visibility</i> In Order to refer to Sam Claus’ comment, thank you for this, I’ve added the installation and use … Read more
Two days ago, at https://github.com/angular/material2/issues/7167, Silthus posted his workaround that overrides the MomentJsDataAdapter. I tried it and it worked as a charm from anywhere in the globe. First he added a MomentUtcDateAdapter that extends MomentDateAdapter import { Inject, Injectable, Optional } from ‘@angular/core’; import { MAT_DATE_LOCALE } from ‘@angular/material’; import { MomentDateAdapter } from ‘@angular/material-moment-adapter’; … Read more
You dont have to use ::ng-deep. You can use [collapsedHeight] and [expandedHeight] on your mat-expansion-panel-header. <mat-accordion [displayMode]=”displayMode” [multi]=”multi” class=”mat-expansion-demo-width”> <mat-expansion-panel #panel1 [hideToggle]=”hideToggle”> <mat-expansion-panel-header [collapsedHeight]=”‘190px'” [expandedHeight]=”‘190px'”> Section 1 </mat-expansion-panel-header> <p>This is the content text that makes sense here.</p> </mat-expansion-panel> </mat-accordion> Link to StackBlitz Demo.
The fix to this is that after you define your ViewChild reference in the DOM your need to make sure to add the =”matSort” after it. Steps: Set up MatSort instances in your component and define them in your DataSource dependencies like so: @ViewChild(‘hBSort’) hBSort: MatSort; @ViewChild(‘sBSort’) sBSort: MatSort; this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, this.hBSort); … Read more
There are two ways which we can use to change size of your MatDialog component in angular material 1) From Outside Component Which Call Dialog Component import { MatDialog, MatDialogConfig, MatDialogRef } from ‘@angular/material’; dialogRef: MatDialogRef <any> ; constructor(public dialog: MatDialog) { } openDialog() { this.dialogRef = this.dialog.open(TestTemplateComponent, { height: ‘40%’, width: ‘60%’ }); this.dialogRef.afterClosed().subscribe(result … Read more
Dispatching MouseEvents seems to be the only way to test Angular Material drag and drop. You should also be aware of the following issue, which tests in Protractor but also applies to this Cypress test CDK DragDrop Regression between 7.0.0-beta.2 and 7.0.0-rc.2: Protractor tests stopped working #13642, It seems that (for want of a better … Read more
While using mat-datepicker, you have to import MatDatepickerModule as well, also MatNativeDateModule is recommended to be imported too. see docs here. import { MaterialModule, MatDatepickerModule, MatNativeDateModule } from ‘@angular/material’; @NgModule({ imports: [ … MaterialModule, // <—– this module will be deprecated in the future version. MatDatepickerModule, // <—– import(must) MatNativeDateModule, // <—– import for date … Read more
You can add any color like below <a mat-mini-fab color=”success” routerLink=”.”>link</a> it generates the class with that value like ‘mat-success’ then create css for that class .mat-success { background-color: green; color: #fff; }
For Angular 13 try to remove tilde symbol (~) from the path so import like: @use ‘@angular/material’ as mat; It works like a charm.
Depending on what you’ve meant by: However, it is always the same size. There are two options. OPTION 1 (STATIC size depending on rows \ cols): Currently, only rows affects the Material textarea height, cols doesn’t change its width. Therefore for increasing width, we have to use the CSS width property on a mat-form-field containing … Read more