Docs / Getting started with Easy Mat UI

Getting started with Easy Mat UI

Easy Mat UI is an Angular library built on Angular Material. This page installs it and renders a first table.

Try it online first

Nothing to install: the starter project opens in your browser with a data table (filters, pagination, create / edit / view dialog) and the reusable components, and you can edit the code.

• Open the starter project on StackBlitz

Requirements

• Angular 20 (package easy-mat-ui-ng20). Angular 19 and 21 build and run but are not officially supported.
• Angular Material and CDK 20, @ngx-translate/core 16, Bootstrap 5, RxJS 7.
• Optional: flag-icons for country flags.

Install

ng add @angular/material
npm install easy-mat-ui-ng20 @ngx-translate/core@^16 bootstrap

Add the Material Icons font to index.html (ng add @angular/material normally does it):

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Provide ngx-translate

All labels of the library go through ngx-translate. Register it once:

import { ApplicationConfig } from '@angular/core';
import { provideTranslateService } from '@ngx-translate/core';

export const appConfig: ApplicationConfig = {
  providers: [provideTranslateService({ defaultLanguage: 'en' })]
};

Your first table

import { Component } from '@angular/core';
import { EasyTableComponent, EasyTableConfig, MatColumnTyped } from 'easy-mat-ui-ng20';

@Component({
  selector: 'app-users',
  standalone: true,
  imports: [EasyTableComponent],
  template: `<lib-easy-table [config]="config"></lib-easy-table>`
})
export class UsersComponent {
  config: Partial<EasyTableConfig> = {
    data: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
    displayedColumns: [
      new MatColumnTyped({ name: 'id' }),
      new MatColumnTyped({ name: 'name' })
    ],
    canCreate: true,
    canUpdate: true,
    canDelete: true
  };
}

Optional global stylesheet

Add the shared stylesheet (colors, buttons, spacing, Material overrides and the theme variables) to the styles array of angular.json:

"styles": [
  "node_modules/easy-mat-ui-ng20/styles/styles.scss",
  "node_modules/flag-icons/css/flag-icons.min.css"
]

Open the live demo or read the source on GitHub.