https://github.com/ng-matero/extensions

Angular Material Extensions Library.
https://github.com/ng-matero/extensions

angular angular-components angular-material autocomplete checkbox-group color-picker data-grid datetimepicker material-color-picker material-data-table ng-matero ng-select ngx-color ngx-color-picker ngx-data-grid ngx-popover popover typeahead

Last synced: 2 days ago
JSON representation

Angular Material Extensions Library.

• Host: GitHub
• URL: https://github.com/ng-matero/extensions
• Owner: ng-matero
• License: mit
• Created: 2019-05-14T02:03:21.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2025-01-10T01:27:40.000Z (16 days ago)
• Last Synced: 2025-01-16T13:34:01.941Z (9 days ago)
• Topics: angular, angular-components, angular-material, autocomplete, checkbox-group, color-picker, data-grid, datetimepicker, material-color-picker, material-data-table, ng-matero, ng-select, ngx-color, ngx-color-picker, ngx-data-grid, ngx-popover, popover, typeahead
• Language: TypeScript
• Homepage: https://ng-matero.github.io/extensions/
• Size: 58.8 MB
• Stars: 461
• Watchers: 12
• Forks: 65
• Open Issues: 29
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-angular - ng-matero/extensions - Angular Material Extensions Library. (Table of contents / Third Party Components)
• awesome-angular - @ng-matero/extensions - Angular Material Extensions Library. (Table of contents / Third Party Components)

README

        
# Ng-Matero Extensions

[![CodeFactor](https://www.codefactor.io/repository/github/ng-matero/extensions/badge)](https://www.codefactor.io/repository/github/ng-matero/extensions)

[![npm](https://img.shields.io/npm/v/@ng-matero/extensions.svg)](https://www.npmjs.com/package/@ng-matero/extensions)

[![GitHub Release Date](https://img.shields.io/github/release-date/ng-matero/extensions)](https://github.com/ng-matero/extensions/releases)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/extensions/blob/main/LICENSE)

[![Gitter](https://img.shields.io/gitter/room/ng-matero/extensions.svg)](https://gitter.im/matero-io/extensions)

The Ng-Matero Extensions is an extended component library for Angular Material.

## Documentation

Check out the [demos and APIs](https://ng-matero.github.io/extensions/).

## Installation

At first, you should install the Angular Material and setup it. [Learn more about the setup](https://material.angular.io/guide/getting-started).

Install the Extensions library:

```bash

$ npm install @ng-matero/extensions --save

```

## Setup

Import the modules you need, e.g. data-grid and select.

```ts

import { MtxGridModule } from '@ng-matero/extensions/grid';

import { MtxSelectModule } from '@ng-matero/extensions/select';

@NgModule({

  ...

  imports: [MtxGridModule, MtxSelectModule, ...],

  ...

})

export class YourAppModule {

}

```

## Theming

After import modules, you must define a theme. [More about theming](https://material.angular.io/guide/theming).

### M2 theme

```scss

@use '@angular/material' as mat;

@use '@ng-matero/extensions' as mtx;

$theme: mat.define-light-theme(...);

@include mat.all-component-themes($theme);

@include mtx.all-component-themes($theme);

```

### M3 theme

```scss

@use '@angular/material' as mat;

@use '@ng-matero/extensions' as mtx;

$config: (...);

$theme: mat.private-deep-merge-all(

  mat.define-theme($config),

  mtx.define-theme($config)

);

html {

  @include mat.all-component-themes($theme);

  @include mtx.all-component-themes($theme);

}

```

The @use-based Sass API is only available in the version `12.0.0` and above.

You can also [using a pre-built theme](https://material.angular.io/guide/theming#pre-built-themes) which in the "prebuilt-themes" directory of the npm package (@ng-matero/extensions/prebuilt-themes).

```scss

@import '@ng-matero/extensions/prebuilt-themes/azure-blue.css'

```

## Development

```bash

$ git clone [email protected]:ng-matero/extensions.git

$ cd extensions

$ yarn

$ yarn run start

```

Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## License

MIT