{"id":21188543,"url":"https://github.com/128keaton/ngxmatfacetsearch","last_synced_at":"2025-07-10T02:31:27.061Z","repository":{"id":39145547,"uuid":"260029876","full_name":"128keaton/NgxMatFacetSearch","owner":"128keaton","description":"An Angular 12/Ivy compatible port of ng-material2-facet-search","archived":false,"fork":false,"pushed_at":"2023-03-04T15:18:47.000Z","size":16935,"stargazers_count":3,"open_issues_count":20,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-14T13:47:04.799Z","etag":null,"topics":["angular2-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/128keaton.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-29T19:59:30.000Z","updated_at":"2024-02-20T22:40:14.000Z","dependencies_parsed_at":"2023-02-17T20:45:41.140Z","dependency_job_id":null,"html_url":"https://github.com/128keaton/NgxMatFacetSearch","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/128keaton%2FNgxMatFacetSearch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/128keaton%2FNgxMatFacetSearch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/128keaton%2FNgxMatFacetSearch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/128keaton%2FNgxMatFacetSearch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/128keaton","download_url":"https://codeload.github.com/128keaton/NgxMatFacetSearch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225613558,"owners_count":17496859,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular2-component"],"created_at":"2024-11-20T18:46:08.492Z","updated_at":"2024-11-20T18:46:09.013Z","avatar_url":"https://github.com/128keaton.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxMaterialFacetSearch [![npm version](https://badge.fury.io/js/ngx-mat-facet-search.svg)](https://badge.fury.io/js/ngx-mat-facet-search)\nAn Angular 12/Ivy port of [ng-material2-facet-search](https://github.com/fdeniz/ng-material2-facet-search).\n\n[Demo](https://128keaton.github.io/NgxMatFacetSearch/)\n\n## Usage\n\n### Getting Started\n1. Import `NgxMatFacetSearchModule` into your application:\n```typescript\nimport {NgxMatFacetSearchModule} from 'ngx-mat-facet-search';\n\n@NgModule({\n  imports: [\n    NgxMatFacetSearchModule\n  ],\n})\n```\n\n2. Provide an array of `Facet` type:\n```typescript\n  // Facet Definitions\n  // You can either define and configure your facets as static object array,\n  // or you can generate dynamically based on your data from back end.\n  public facets: Array\u003cFacet\u003e = [\n    {\n      name: 'userName',\n      labelText: 'User Name',\n      type: FacetDataType.Text,\n      description: 'Please enter your user name (simple text input example)',\n      icon: 'person_outline'\n    }, {\n      name: 'birthday',\n      labelText: 'Birthday',\n      icon: 'date_range',\n      description: 'Please select your birthday (date select example)',\n      type: FacetDataType.Date,\n    },\n    {\n      name: 'eventDays',\n      labelText: 'Event Days',\n      icon: 'event_available',\n      description: 'Please select start and end dates (date range select example)',\n      type: FacetDataType.DateRange,\n    },\n    {\n      name: 'isParticipant',\n      labelText: 'Is a Participant?',\n      icon: 'live_help',\n      description: 'This is a test field, you can test boolean data type.',\n      type: FacetDataType.Boolean,\n    },\n    {\n      name: 'state',\n      labelText: 'State',\n      description: 'Please select something (single select, http example)',\n      type: FacetDataType.CategorySingle,\n      icon: 'folder_open',\n      /* mock http service call  */\n      options: of([\n        {value: 'open', text: 'Open', count: 49},\n        {value: 'closed', text: 'Closed', count: 23}\n      ]).pipe(delay(700))\n    },\n    {\n      name: 'license',\n      labelText: 'License(s)',\n      description: 'Please select your licenses (multi select, http example)',\n      type: FacetDataType.Category,\n      icon: 'drive_eta',\n      /* mock http service call  */\n      options: of([\n        {value: 'a', text: 'Class A'},\n        {value: 'b', text: 'Class B'},\n        {value: 'c', text: 'Class C'}\n      ]).pipe(delay(1200))\n    },\n    {\n      name: 'city',\n      labelText: 'Cities',\n      description: 'Please select from cities.',\n      type: FacetDataType.Typeahead,\n      icon: 'location_city',\n      typeahead: {\n       function: (txt) =\u003e {\n         return  of([\n           {value: txt + '-a', text: txt + ' A'},\n           {value: txt + '-b', text: txt + ' B'},\n           {value: txt + '-c', text: txt + ' C'}\n         ]).pipe(delay(1200));\n       },\n      }\n    }\n  ];\n```\n\n### Cookies/Identities\nBy default, NgxMatFacetSearch will save the selected facets in the browser's cookies using the parent component's selector as a base identifier.\nFor example, a component with the selector `app-home-page` results in the facet's identifier being `app-home-page-facet`.\n\n#### Generation Strategies:\n* Parent ID _(default)_ - Uses the parent component's selector for identity generation\n* Random - Uses `uuidv4` (if installed) to generate an identifier. This is useful for if you want very fine control over what is saved or not.\n* Window URL _(not recommended)_* - Uses the current URL to generate an identifier. `/app/home/base` becomes `app-home-base-facet`. \n* None - Completely disables saving in cookies\n\nYou can override this setting in the configuration (see below).\n\n\\* Note on Window URL: If the component tries to load before the route is fully resolved, or you have some weird URL thing going on, \nthe same ID per component might not be used. This is why I moved to the `Parent ID` strategy by default.\n\n### Configuration\n\n#### Basic\nMost of the simple options can be configured directly through the component itself in the template:\n\n* `source` - `Facet[]` - An array of Facets to provide. Default: `[]`\n* `placeholder` - `string` - A string value for the empty/new Facet button. Default: `Filter Table`\n* `clearButtonText` - `string` - A string value for the clear Facets button. Default: `Clear Filters`\n* `clearButtonEnabled` - `boolean` - A true/false value to indicate whether to show or hide the clear Facets Button. Default: `true`\n* `dateFormat` - `string` - A string value notating the date format in date-specific Facets. Default: `M/d/yyyy`\n* `tooltip` - `string` - A string value containing tooltip text that appears when you over the filter icon. Default: `null`\n* `displayFilterIcon` - `boolean` - A true/false value to indicate whether to show or hide the filter icon. Default: `true`\n* `facetWidth` - `string` - A pixel value (notated with `px` at the end) that refers to the width of the Facet panel. Default: `400px`\n* `facetHasBackdrop` - `boolean` - A true/false value to indicate whether the Facet panel has a backdrop. Default: `true`\n* `confirmOnRemove` - `boolean` - A true/false value which corresponds to prompting the user when they delete a Facet. Default: `true`\n* `chipLabelsEnabled` - `boolean` - A true/false value to indicate whether the Facet button shows its label. Default: `true`\n* `identifier` - `string` - A string value that contains a unique but persistent ID for the Facet Search component. Default: `null` (see above).\n\n#### Advanced\n\nYou can also inject some more options into the component on creation, either from the parent module or containing component.\n\n* `allowDebugClick` - `boolean` - A true/false value that, when enabled, allows the user to long click on the filter icon, which results in\nthe component's identifier being printed in the console. Default: `true`\n* `cookieExpiresOn` - `number` - A number which refers to the number of days before the cookie expires. Default: `1`\n* `identifierStrategy` - `FacetIdentifierStrategy` - A value which contains the FacetIdentifierStrategy value being used. Default: `FacetIdentifierStrategy.ParentID` (see above)\n* `loggingCallback` - `(...args) =\u003e void` - A value which contains a function callback for logging. Default: `() =\u003e {}`\n\nInside your module/component providers, you can easily pass configuration to the child Facet Search Components:\n\n```typescript\nproviders: [\n    {\n      provide: FACET_CONFIG, useFactory: () =\u003e new FacetConfig({\n          loggingCallback: (...args) =\u003e {\n            console.log(...args) // Log output to the console\n          },\n          identifierStrategy: FacetIdentifierStrategy.ParentID // Use the parent ID strategy\n        }),\n    }\n  ]\n```\n\nYou can also call the `reconfigure(config: Partial\u003cFacetConfig\u003e | FacetConfig, identifier?: string)` function on the component directly\nif you need to change things on the fly:\n```typescript\n  @ViewChild(NgxMatFacetSearchComponent)\n  facetSearch: NgxMatFacetSearchComponent;\n\n// ....\n  const newConfig = new FacetConfig({\n    loggingCallback: (...args) =\u003e {\n      console.log(...args) // Log output to the console\n    },\n    identifierStrategy: FacetIdentifierStrategy.Random // Use the Random strategy\n  });\n  \n  this.facetSearch.reconfigure(newConfig); // Reconfigure directly\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F128keaton%2Fngxmatfacetsearch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F128keaton%2Fngxmatfacetsearch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F128keaton%2Fngxmatfacetsearch/lists"}