Re-use custom IgxGridToolbar?

[SkylerLutz]

Question

Hi -- I added some custom buttons + drop downs to an igx-grid-toolbar and I'd like to re-use the toolbar with a number of other grids in my app. Is it possible to re-use the toolbar? I tried wrapping my igx-grid-toolbar in a custom component and nesting it inside a parent grid but the parent can't seem to detect the toolbar -- meaning, no toolbar shows up on screen at all. Thanks

igniteui-angular version: 12.1.5
browser: Chrome 91.0.4472.114

[SkylerLutz]

@kdinev @rkaraivanov bump! Thanks in advance

[rkaraivanov]

@SkylerLutz

Unfortunately, currently that is not supported as the grid searches for the toolbar as a direct child in its own tree. Thus the moment you wrap it up in a another component it cannot "find" it.

[SkylerLutz]

@rkaraivanov Got it -- thanks. Can you please mark this as a feature request? I'd like to be able to reuse the custom toolbar to avoid code duplication. Thanks

[rkaraivanov]

@SkylerLutz

A possible workaround is to wrap your custom toolbar content in a component and the reuse it between the tags. Of course if that is applicable in your use case.

[kdinev]

@SkylerLutz I tried to abstract the toolbar content as a template, but then I remembered that in our attempt to make the toolbar layout and content easily configurable, we define slots inside the toolbar as directives, which the toolbar looks for as content children. The only freely templatable area is between the title and the actions slots in the toolbar and so the effect of my attempt is the following, which really doesn't serve your purpose:

https://stackblitz.com/edit/github-gybdef?file=src/app/grid/grid-toolbar-sample/grid-toolbar-sample-1.component.html