# Class FilterTileComponent

UI component that renders a filter tile based on filter type

# Example

Here’s how to render a filter model as a filter tile.

<!--Component HTML template in example.component.html-->
<csdk-filter-tile
 [filter]="filterTileProps.filter"
 (filterChange)="filterTileProps.filterChange($event)"
/>

// Component behavior in example.component.ts
import { Component } from '@angular/core';
import { type FilterTileProps } from '@sisense/sdk-ui-angular';
import { filterFactory } from '@sisense/sdk-data';
import * as DM from '../../assets/sample-healthcare-model';

@Component({
 selector: 'example',
 templateUrl: './example.component.html',
 styleUrls: ['./example.component.scss'],
})
export class ExampleComponent {
 filterTileProps: FilterTileProps = {
   filter: filterFactory.members(DM.ER.Date.Years, ['2013-01-01T00:00:00']),
   filterChange({ filter }) {
     if (filter) {
       this.filter = filter;
     }
   },
 };
}

# Implements

AfterViewInit
OnChanges
OnDestroy

# Constructors

# constructor

new FilterTileComponent(sisenseContextService, themeService): FilterTileComponent

Constructor for the FilterTileComponent.

# Parameters

Parameter	Type	Description
`sisenseContextService`	`SisenseContextService`	Sisense context service
`themeService`	`ThemeService`	Theme service

# Returns

FilterTileComponent

# Properties

# Constructor

# sisenseContextService

sisenseContextService: SisenseContextService

Sisense context service

# themeService

themeService: ThemeService

Theme service

# Other

# defaultDataSource

defaultDataSource: DataSource | undefined

Default data source used for filter tiles

# filter

filter: Filter

Filter to display

# filterChange

filterChange: EventEmitter< FilterChangeEvent >

Filter change event handler.

# filterDelete

filterDelete: EventEmitter< void >

Filter delete event handler.

# filterEdit

filterEdit: EventEmitter< FilterEditEvent >

Filter edit event handler.