nimbleRouterLink cannot be used by wrapper components

[rbell517]

🎙 Discussion

For the SLE details panel we want a Angular router-capable hyperlink details item. To fit in the details panel design, we need a wrapper component that adds some styling and a label. To be router-capable, nimble provides the nimbleRouterLink, which is a derivation of the Angular routerLink. Ideally for our wrapper component we provide just as much flexibility that the nimbleRouterLink provides. To do that today we would need to copy forward all of the inputs available on a routerLink, which isn't ideal.

nimbleRouterLink's selector is specifically keyed to nimble-anchor elements. It won't bind to a wrapper div or wrapper Angular component. From looking at the implementation, this is because the nimbleRouterLink implementation relies on the directive being directly attached to the nimble-anchor so it can update its href attribute whenever inputs to the directive are changed (via ngOnChanges). nimbleRouterLink also hooks into the onClick handler to disable standard anchor navigation.

I'm opening this as a discussion and not as a bug because this is clearly intended behavior with the current implementation, but I'd like to discuss what it would take to allow what I'd like to do.

[mollykreis]

After a bit of discussion, we don't think that trying to put nimbleRouterLink on a wrapper component is the correct path forward. Specifically, the issue is that the routerLink (which nimbleRouterLink extends) not only has all the inputs to make navigation work correctly, but it also contains the onClick behavior to control interaction with the link. It is intended to be used on a component that is entirely a link, which is not the case for the component you are describing -- which would have a link + label, where clicking the label should cause page navigation.

That being said, we have two alternatives to suggest:

Alternative 1 - Use Angular's content projection to "slot" the nimble-link into the component

• This would allow the client app to use the nimbleRouterLink directly to configure the nimble-anchor
• If desired, you could take a similar approach to the toolbar, which creates directives to enforce appearance choices on the slotted content. In this case, the directive could set consistent values for appearance and underline-hidden on the nimble-anchor.
  Example where toolbar takes a button with [slToolbarPrimaryButton] and [slToolbarPrimaryButton] enforces some button configuration.

Alternative 2 - Duplicate the desired inputs on the component

• You could just duplicate the desired inputs on the component and set them on the underlying nimble-anchor. Depending on what the use cases are for the component, not all the inputs from the routerLink would need to be duplicated.