Evaluate using host directives in Angular 15

[mollykreis]

🧹 Tech Debt

Once we upgrade to Angular 15, we should evaluate using HostDirectives as a way to simplify our Angular code. Some ideas/questions are:

• Can we stop extending Angular's directives in some places, such as the RouterLinkWithHref
• Can we consolidate repeated code? For example, can we create a "button base" or "drop down base" directives that would allow us to not have to repeat configuration that is shared in base classes within nimble-components?

[m-akinc]

Can we stop extending Angular's directives in some places, such as the RouterLinkWithHref?

For RouterLinkWithHref specifically, we can potentially switch to using hostDirectives instead of extending it. RouterLink is standalone, so that works. However, we need to re-examine the way we implement RouterLink support since Angular made significant changes to its implementation in v15 (see #1570). As for other Angular directives that we extend (e.g. various CVAs), I did not find any that were standalone, meaning we cannot use hostDirectives for them. We will have to address #732 some other way.

Can we consolidate repeated code?

We could split off common parts of the interface into a separate directive (that was then brought along via hostDirectives), but then we would not have the full interface exposed by a single directive. I don't think we want to make that tradeoff. We would end up redefining the shared API on the main component directive, which would negate the benefit of splitting out that API in the first place. Here's an example of what it would look like:

@Directive({
    standalone: true
})
export class NimbleButtonCommonDirective {
    public get appearance(): ButtonAppearance {
        return this.elementRef.nativeElement.appearance;
    }

    @Input() public set appearance(value: ButtonAppearance) {
        this.renderer.setProperty(this.elementRef.nativeElement, 'appearance', value);
    }
    ...
}

@Directive({
    selector: 'nimble-button',
    hostDirectives: [{
        directive: NimbleButtonCommonDirective,
        inputs: ['appearance', ...]
    }]
}
export class NimbleButtonDirective {
    private readonly buttonCommon: NimbleButtonCommonDirective = inject(NimbleButtonCommonDirective, { self: true });

    public get appearance(): ButtonAppearance {
        return this.buttonCommon.appearance;
    }

    public set appearance(value: ButtonAppearance) {
        this.buttonCommon.appearance = value;
    }
    ...
}   

I did not find any other potential uses for host directives in nimble-angular.

[m-akinc]

@rajsite I remember you pushing back some about this being a closed issue, but I don't remember details. Do you still have reservations, or specific things you think merit further investigation?

[rajsite]

Think Molly had split the discussion and this one is fine to close