Working StackBlitz No need to use ngModel or Forms In your html: <mat-form-field> <mat-select [(value)]=”selected” placeholder=”Mode”> <mat-option value=”domain”>Domain</mat-option> <mat-option value=”exact”>Exact</mat-option> </mat-select> </mat-form-field> and in your component just set your public property selected to the default: selected = ‘domain’;
It (FormGroup) behaves correctly. Your form requires username and password, thus when you reset the form it should be invalid (i.e. form with no username/password is not valid). If I understand correctly, your issue here is why the red errors are not there at the first time you load the page (where the form is … Read more
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers imports: [ MatDatepickerModule, MatNativeDateModule ], providers: [ MatDatepickerModule, ],
I had this error when adding dialogs to a service to be shared in many components. Just to clarify, the error wasn’t present in the application before moving dialogs to the service. The solution was to include a custom provider MatDialogRef in the main module import { DialogService } from ‘./services/dialog.service’; import { MatDialogModule, MatDialogRef … Read more
Edit: As the icons listed on the website are slightly outdated, here’s the correct resources: Material Design Icons DX – (forked version) The old Material.io link now redirects to the Icons page on Google Fonts. Isn’t it Material Icons (as stated by @RobbyCornelissen)? The Google Material Design team had recently (last month) updated their website. … Read more
Yes. It is possible to jump to a specific stepper by using selectedIndex property of the MatStepper. Also, MatStepper exposes public methods next() and previous(). You can use them to move back and forth. In your template: Add an id to your stepper e.g. #stepper. Then in your goBack() and goForward() methods, pass the stepper … Read more
Remember to add MatTableModule in your app.module’s imports i.e. In Angular 9+ import { MatTableModule } from ‘@angular/material/table’ @NgModule({ imports: [ // … MatTableModule // … ] }) Less than Angular 9 import { MatTableModule } from ‘@angular/material’ @NgModule({ imports: [ // … MatTableModule // … ] })
Check out this plunkr. When you’re binding to variables, you need to use the brackets. Also, you use the hashtag when you want to get references to elements in your html, not for declaring variables inside of templates like that. <md-button-toggle *ngFor=”let indicador of indicadores; let first = first;” [value]=”indicador.id” [checked]=”first”> Edit: Thanks to Christopher … Read more
You’re mistaking matSortStart for matSortDirection. Try this: <table matSort (matSortChange)=”sortData($event)” matSortActive=”name” matSortDirection=”asc” matSortDisableClear> https://stackblitz.com/edit/angular-defaultsort?file=src/app/sort-overview-example.html matSortStart can be used to reverse the cycle used when sort (e.g. when the user clicks to sort, it starts at desc instead of asc). Edit: Thanks Ben for providing an updated example
using css we can adjust specific column width which i put in below code. user.component.css table{ width: 100%; } .mat-column-username { word-wrap: break-word !important; white-space: unset !important; flex: 0 0 28% !important; width: 28% !important; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .mat-column-emailid { word-wrap: break-word !important; … Read more