angular-material2

Angular Material 2 – Disable Ripple?

by

Use disableRipple as an attribute to disable ripples for the md-tab-group as Angular2+ using the Angular material. Just simply do something like this: <md-tab-group disableRipple></md-tab-group> Also if you are using the latest Angular Material, it’s a little bit different like this below: <mat-tab-group [disableRipple]=”true”></mat-tab-group>

angular material 2 date picker auto open on focus

by

mdDatepicker provides method open() in order to open it manually doe developers. You can invoke it at md-input‘s focus event. See docs(Method of MatDatepicker). <md-input-container> <input mdInput [mdDatepicker]=”picker” (focus)=”picker.open()” placeholder=”Choose a date”> <button mdSuffix [mdDatepickerToggle]=”picker”></button> </md-input-container> <md-datepicker #picker></md-datepicker> Demo(included demo for opening on focus and opening in typescript)

Angular 6 MatTable Performance in 1000 rows

by

Not sure if this will help your situation as there’s no code but we’ve found that the MatTable loads very slowly if a large data set is set before you set the datasource paginator. For example – this takes several seconds to render… dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource(); @ViewChild(MatSort) sort: MatSort; @ViewChild(MatPaginator) paginator: MatPaginator; ngOnInit() … Read more

How to enable and disable a mat-button based on a select form

by

If you look at Angular Material Demos (button), which is an older version of Angular Material demo, there is a button performing this. This demo used to correspond (it’s now outdated) to the demo on the Angular GitHub page, see: github.com – Angular Material – src/demo-app/button. You can simply use: <button mat-button [disabled]=”isDisabled”> where isDisabled … Read more

Disable (make read-only) text input on mat-datepicker when using a reactive form

by

To create a disabled FormControl is really simple. 1 – Don’t use disabled attribute in your template; 2 – Instantiate your FormGroup like this: this.formGroup = this.formBuilder.group({ dateJoined: { disabled: true, value: ” } // … }); That being said, although you want to prevent users from typing something in the input, you still want … Read more