ngx-mat-query-search

NgxMaterialQuerySearch

Demo

Usage

1. Import the module:

  imports: [
  QuerySearchModule.forRoot({
    loggingCallback:  (...args) => {
      console.log(...args);
    },
    debug: true,
    encode: false
  }),
]

2. Use in a component template:

<ngx-query-search>
  <query-fields>
    <query-field name="name" label="Full Name" type="string"></query-field>
    <query-field name="hasValues" label="Has Values" type="string" [values]="['a', 'b']"></query-field>
    <query-field name="birthday" label="Birthday" type="date" format="dd/MM/yyyy"></query-field>
    <query-field name="joinDay" label="Join Date" type="date" format="MM/dd"></query-field>
  </query-fields>
</ngx-query-search>

3. Use the service to consume the output:

 constructor(private querySearchService: QuerySearchService) {
  this.querySearchService.queryUpdated.subscribe(newQueryObject => this.queryObject = newQueryObject);
  this.querySearchService.queryStringUpdated.subscribe(newQueryString => this.queryString = newQueryString);
}