How to import Angular Material in project?

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

How to use MatPaginatorIntl?

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

how to pass data from angular material dialog to parent component?

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

How to remove space bottom mat-form-field

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

How to use paginator from material angular?

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

How to translate mat-paginator in Angular 4?

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

Using Bootstrap for Angular and Material design for Angular together

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

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)