ngx-mat-search-field

ngx-mat-search-field
========================


Angular 9 component providing an input field for searching.

Try it

Demo running at:

https://stackblitz.com/edit/ngx-mat-search-field-demo

Installation

``
npm i ngx-mat-search-field
`

API

import { SearchFieldModule } from 'ngx-mat-search-field'

selector: ngx-mat-search-field

$3

| Input | Type | Required | Description |
| ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- |
| dataSource | object | YES | the search field's source of data which is provided as a search-function |
| prefetch | boolean | Optional, default: true | if true, it prefetches the data, if false, the data is fetched when the field gets focused |
| maxRows | number | Optional, default: 8 | number of items in one fetch |

Usage

Import the SearchFieldModule in your app.module.ts:
`typescript
import { SearchFieldModule } from 'ngx-mat-search-field';

@NgModule({
imports: [
BrowserAnimationsModule,
ReactiveFormsModule,
SearchFieldModule
],
})
export class AppModule {}
`

Provide a DataSource that defines the search method:

`typescript
import { SearchFieldDataSource, SearchFieldResult } from 'ngx-mat-search-field';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

searchFieldDataSource: SearchFieldDataSource;

constructor(private userService: UserService) {
this.searchFieldDataSource = {
search(search: string, size: number, skip: number): Observable {
return userService.getUsers(search, size, skip);
}
};
}
}
`

Use it in your component:

`html

[dataSource]="searchFieldDataSource"
placeholder="User"
>

`

Development

$3

Run ng serve for a dev server to test the library. Navigate to http://localhost:4200/.

$3

Run npm run build-lib to build the search-field project. The build artifacts will be stored in the dist/ directory.

$3

Run npm run package to build and package the search-field project. The build artifacts will be stored in the dist/` directory.