Miss any of our Open RFC calls?Watch the recordings here! »


7.3.2 • Public • Published

xMatLib 7.3.2

A bunch of utilities and components to use in your Angular 7+ apps!

Before starting

As you may know directives don't have a "Styles" property. So it's impossible to let them style your markup, unless you include an external CSS.

For this purpose the style of directives is compiled in

  • /css/xmat-library.css
  • /scss/xmat-library.scss

Be sure of including at least one of these in your styles.css / styles.scss to get xmatDirectives properly working


Xmat includes a Material Theme you can activate by using

@import "~ngx-mat-lib/scss/xmat-vars";
@import angular-material-theme($xmat-theme);

You can of course override all of theme colors by overriding the following variables:

// xmat-vars.scss 
$xmat-primary: mat-palette($xmat-blue) !default;
$xmat-accent: mat-palette($xmat-blue-accent) !default;
$xmat-accent-light: mat-palette($xmat-blue-accent-light) !default;
$xmat-warn: mat-palette($mat-red) !default;
$xmat-theme: mat-light-theme($xmat-primary, $xmat-accent, $xmat-warn) !default;


Angular Material is a complete tool. But there are ways to use come components which may come handy. For example xMatLib includes an SCSS library which provides common classes and mixins, that you can use in your app to drastically reduce duplicate code!



This util allow you to mock your frontend calls when developing, by simply creating some json and a list. Advanced behaviours can be achieved with custom callbacks and custom mock urls.

Included Angular Components


Wrapper for mat-expansion-panel

Part Selector
Accordion header .xmat-accordion-title
Accordion description .xmat-accordion-desc
Accordion content .xmat-accordion-content


Option Type
expanded boolean
disabled boolean
color ThemePalette


A simple directive to add interactive look to any text. Useful on click bindings


Option Type
disabled boolean
color ThemePalette


Other components

  • xmat-badge
  • xmat-dialog (alert + confirm)
  • xmat-global-spinner
  • xmat-legend
  • xmat-mini-chip-list
  • xmat-overlay
  • xmat-pipes
  • xmat-snack-bar
  • xmat-spinner
  • xmat-time-input
  • xmat-validators


To install this library, run:

$ npm install ngx-mat-lib --save-dev

Be sure to have peerDependencies installed, especially:

  • @angular/material
  • @angular/cdk


  • Edit src files
  • Update version in package.json and src/package.json
  • Commit
  • Run npm build
  • Run npm publish dist

Consuming your library

Once published to npm, you can update your library in any Angular application by running:

$ npm install ngx-mat-lib@latest

and then from your Angular AppModule:

import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
// Import what you need from ngx-mat-lib
import { XmatTimeModule } from "ngx-mat-lib";
  declarations: [
  imports: [
    // Specify the import
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application:

<!-- You can now use your library component in app.component.html -->


You can now (v 2.0.0 and later) test all of the stuff, by running

npm run start

In the src folder there's an app test, you can use to test everything you need!

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Thanks to

Versioning NgxMatLib will be maintained under the Semantic Versioning guidelines as much as possible.

Releases will be numbered with the following format:


And constructed with the following guidelines:

Breaking backward compatibility bumps the major (and resets the minor and patch) New additions, including new icons, without breaking backward compatibility bumps the minor (and resets the patch) Bug fixes, changes to brand logos, and misc changes bumps the patch For more information on SemVer, please visit http://semver.org.


MIT © Tony Samperi

ngx-mat-lib is free, open source, and GPL friendly. You can use it for commercial projects, open source projects, or really almost whatever you want.

Attribution is required by MIT, SIL OLF, and CC BY licenses. Downloaded files already contain embedded comments with sufficient attribution, so you shouldn't need to do anything additional when using these files normally.


  • Add dynamic template to xmat-alert-dialog (as of xmat-confirm-dialog)
  • Create dictionary for labels (rely on ngx-translate?)
  • Add xmat-countdown component
  • Add xmat-password component
  • Add xmat-progress-state component
  • Add xmat-datepicker component
  • Add xmat-simple-table component


npm i ngx-mat-lib

DownloadsWeekly Downloads






Unpacked Size

4.18 MB

Total Files


Last publish


  • avatar