# TCB Filters Component

The <mark style="color:red;">**`CmsFiltersComponent`**</mark> is providing dynamic and responsive filtering functionality for Angular applications. It integrates with the `CmsService` and utilizes a `GenericFiltersComponent` to dynamically apply and reset filters for querying data.&#x20;

How to use the component in your app :

1. import the component : &#x20;

```typescript
import {CmsFiltersComponent} from '@tradinos/cms-frontend-entity';
```

2. The selector for component , like it : &#x20;

```markup
<lib-cms-filters></lib-cms-filters>
```

#### **Features**

1. **Dynamic Filtering**:
   * Leverages the `GenericFiltersComponent` to dynamically apply filters based on user input.
2. **Responsive Design**:
   * Automatically adjusts to device screen size (e.g., tablet view) using Angular's `BreakpointObserver`.
3. **Filter Management**:
   * Supports both applying filters and resetting filters, with seamless integration into the `CmsService` pipeline.
4. **Observable Integration**:
   * Listens to `applyFilters$` and `resetFilters$` observables from the `CmsService` for filter events.

#### **Inputs**

This component does not declare explicit inputs via `@Input()`. Instead, it dynamically interacts with the `CmsService` and `GenericFiltersComponent`. However, the following dependencies are essential for its functionality:&#x20;

1. <mark style="color:orange;">**cmsService(required)**</mark>:The service that manages query parameters, filter application, and reset logic.
2. [<mark style="color:orange;">**GenericFiltersComponent(required)**</mark>](https://tradinos.gitbook.io/tradinos-code-base-docs/frontend-entity/components/filter-components/generic-filters-component):The dynamic component responsible for rendering and managing filter fields and user interactions.&#x20;

#### **Methods**

**1. `ngOnInit(): void`**

* **Description**:
  * Lifecycle hook that initializes the component.
  * Subscribes to screen size changes to determine if the device is a tablet.
* **Behavior**:
  * Sets `isTablet` to `true` if the screen width is below 1200px.

**2. `applyFilters(): void`**

* **Description**:
  * Retrieves the current filter values from the `GenericFiltersComponent` and pushes them to the `queryParams$` observable in `CmsService`.
* **Use Case**:
  * Triggered when the user applies filters to update the data query.

**3. `resetFilters(value: boolean): void`**

* **Description**:
  * Resets the filters in the `GenericFiltersComponent` and optionally clears the query parameters in the `CmsService`.
* **Parameters**:
  * `value`: If `true`, clears all query parameters.