UPDATE for Angular 9.0.1 Since this version there is no barrel file for massive exports in the root index.d.ts. The assets imports should be: import { NgModule } from ‘@angular/core’; import { MatCardModule } from ‘@angular/material/card’; import { MatButtonModule} from ‘@angular/material/button’; import { MatMenuModule } from ‘@angular/material/menu’; import { MatToolbarModule } from ‘@angular/material/toolbar’; import { … Read more
You can do it like this: I’m providing you with croatian labels: customClass.ts import { Injectable } from ‘@angular/core’; import { MatPaginatorIntl } from ‘@angular/material/paginator’; @Injectable() export class MatPaginatorIntlCro extends MatPaginatorIntl { itemsPerPageLabel=”Stavki po stranici”; nextPageLabel=”Slijedeća stranica”; previousPageLabel=”Prethodna stranica”; getRangeLabel = (page: number, pageSize: number, length: number) => { if (length === 0 || pageSize … Read more
Nice solution by leocaseiro <input class=”ng-hide” id=”input-file-id” multiple type=”file” /> <label for=”input-file-id” class=”md-button md-raised md-primary”>Choose Files</label> View in codepen
I found solution 🙂 It is very very easy but i could’t see at first 🙂 only like that : <mat-cell *matCellDef=”let element “> {{element[disCol]}} </mat-cell> I must use {{element[disCol]}} only in HTML. Now , everything is ok:)
Check full Tutorial Link Just pass data back from Dialog component to parent in close() method //dialog-box.component.ts import { Component, Inject, Optional } from ‘@angular/core’; import { MatDialogRef, MAT_DIALOG_DATA } from ‘@angular/material’; export interface UsersData { name: string; id: number; } @Component({ selector: ‘app-dialog-box’, templateUrl: ‘./dialog-box.component.html’, styleUrls: [‘./dialog-box.component.css’] }) export class DialogBoxComponent { action:string; local_data:any; … Read more
You can add this in your css ::ng-deep .mat-form-field-wrapper{ margin-bottom: -1.25em; } NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly. Error and hint get inside the form-field. Without using ::ng-deep( for Angular 8 ) Turn off encapsulation of your component inside which you change the padding. You can do this … Read more
I’m struggling with the same here. But I can show you what I’ve got doing some research. Basically, you first start adding the page @Output event in the foo.template.ts: <md-paginator #paginator [length]=”length” [pageIndex]=”pageIndex” [pageSize]=”pageSize” [pageSizeOptions]=”[5, 10, 25, 100]” (page)=”pageEvent = getServerData($event)” > </md-paginator> And later, you have to add the pageEvent attribute in the foo.component.ts … Read more
You can use the MatPaginatorIntl for this. Will Howell made an example that no longer works, so here is an updated version (with Dutch) and step-by-step guidance. Import the MatPaginatorIntl from @angular/material into your application. Create a new paginator file for your locale (in this example I use Dutch) and import that: import { getDutchPaginatorIntl … Read more
The MatIconModule is missing from your imports. imports: [ BrowserModule, FormsModule, HttpModule, MatButtonModule, MatIconModule, // <– here ],
If you add both bootstrap & angular-material this is what will happen Both have css which will target your front end elements (e.g. input element, buttons) Each have their own look & feel (i.e. Bootstrap input element is different from Material input element). So, your overall project won’t have one single look & feel. If … Read more