I want to open the little menu with filter options from a custom floating filter component in Angular 2+.
Like in the official documentation it should be posible to have a floating input field with an icon next to it.
I managed to crate a custom floating component which works fine for me, The only problem ist to open the little menu to select the filter options like in the default implementation of the floating filter (see picture below).
Can you please tell me how to open this menu from an custom floating filter or at least how the default component manages to do this?
Here is some code of mine:
Typescript
export interface TextFloatingFilterChange {
model: SerializedTextFilter
}
export interface TextFloatingFilterParams extends IFloatingFilterParams<SerializedTextFilter, TextFloatingFilterChange> {
value: string
}
@Component({
selector: 'floating-text-filter',
templateUrl: 'floating-text-filter.component.html',
styleUrls: ['floating-text-filter.component.scss']
})
export class TextFloatingFilter implements IFloatingFilter<SerializedTextFilter, TextFloatingFilterChange, TextFloatingFilterParams>, AgFrameworkComponent<TextFloatingFilterParams>, AfterViewInit {
private params: TextFloatingFilterParams;
public currentValue: string;
agInit(params: TextFloatingFilterParams): void {
this.params = params;
this.currentValue= '';
}
valueChanged() {
this.params.onFloatingFilterChanged({model: this.buildModel()})
}
ngAfterViewInit(): void {
this.valueChanged();
}
onParentModelChanged(parentModel: SerializedTextFilter): void {
if(!parentModel) {
this.currentValue = '';
} else {
console.log(parentModel);
this.currentValue = parentModel.filter;
}
}
private buildModel(): SerializedTextFilter {
if(this.currentValue === '') {
return null
}
return {
filterType: 'text',
type: 'contains',
filter: this.currentValue
}
}
public openFilterMenu(): void {
console.log('open Menu');
}
}