5

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.
enter image description here
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). enter image description here

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');
  }
}
JohnDizzle
  • 1,268
  • 3
  • 24
  • 51

0 Answers0