Search highlight with column component

[Tompish]

Hello! I have a custom column component which simply consist of a basic text that has a tooltip attached to it. The search functions still works, but the text does not get highlighted anymoresince it is a custom component. How can I fix this issue?

[hjalmers]

Hi @Tompish, I haven't thought about that to be honest but I'm not surprised it's not working as the render pipe (which adds the highlight style) isn't used on custom components. I'm going to mark this as a feature request as I think this is something the table should handle although it would be possible to implement it in the custom component too.

[Tompish]

Thank you for fixing the feature! But I can't get it to work even though i changed my TooltipComponentt to <span [innerHTML]="row.first_name | gtHighlight:searchTerms">. Do i need to do something in the gtSearch function? I cant see any gtSearch applied to the ViewChild called "myTable" in the example provided.

Best Regards, Tompish

[hjalmers]

You shouldn't have to do anything else but there might be an issue with passing on the search terms. I thought about different ways to make the highlight work for custom components and decided that the easiest way would probably be to create a pipe that can be used in the view. The only thing that's a bit annoying is that you have to pass the search terms to the pipe in some way and since we don't have a service for our table instance, I passed the search terms down through GtCustomComponent. It's a base component that you need to use for your own custom component. Like this:

@Component({
    template: `<span ngbTooltip="{{'Some tooltip for '+ row.first_name + ' ' + row.last_name }}" [innerHTML]="(row.first_name + ' ' + row.last_name) | gtHighlight:searchTerms"></span>`,
    styles: []
})
export class TooltipComponent extends GtCustomComponent<any> {
    constructor() {
        super();
    }
}

Perhaps you've missed this part (which isn't really explained anywhere except in the code)? You could test by defining searchTerms in your custom component and set it to some value you have in your data just to see if it's highlighting the text at all.

[Tompish]

Everything works fine if i don't use ngOnInit. I rewrote the code some so it does not use ngOnInit. Thank you!