open-index/open-npm huggingface dataset:
npm package: @ng-matero/extensions
Description: Angular Material Extensions
Author: nzbin
Latest version: 21.1.4

# 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: (...);

// <19.0
$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);
}

// >=19.0
html {
  color-scheme: light;

  @include mat.theme($config);
}
```

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 git@github.com: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
npm package: @ng-matero/ng-select
Description: Angular Select - All in One UI Select, Multiselect and Autocomplete
Author: nzbin
Latest version: 0.5.2

# Combobox

[![npm](https://img.shields.io/npm/v/@ng-matero/ng-select.svg)](https://www.npmjs.com/package/@ng-matero/ng-select)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/ng-matero/combobox/blob/main/LICENSE)

Angular Select - Lightweight all in one UI Select, Multiselect and Autocomplete

## Installation

```bash
npm install @ng-matero/ng-select --save
```

## Usage

```ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-matero/ng-select';

@Component({
  selector: 'your-app',
  template: `
    <ng-select [items]="cars" bindLabel="name" bindValue="id" [(ngModel)]="selectedCars" />
  `,
  imports: [FormsModule, NgSelectModule],
})
export class YourAppComponent {
  cars = [
    { id: 1, name: 'Volvo' },
    { id: 2, name: 'Saab', disabled: true },
    { id: 3, name: 'Opel' },
    { id: 4, name: 'Audi' },
  ];
  selectedCars = 3;
}
```

## License

MIT