Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 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: 2024-12-25T09:43:49.000Z (25 days ago)
- Last Synced: 2025-01-09T12:12:19.700Z (10 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.2 MB
- Stars: 458
- Watchers: 12
- Forks: 65
- Open Issues: 25
-
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