routeActive

const routeActive: (route: string, toggleClass?: string) => DirectiveResult<typeof RouteActiveDirective>;

Reactive directive to check for the current route being active. Can be used directly on an element to toggle a css class or with a boolean attribute or property.

Parameters

route

string

The route path to match against the current location.

toggleClass?

string

The CSS class to toggle on the element when the route is active.

Default

'active'

Returns

DirectiveResult<typeof RouteActiveDirective>

Examples

Either toggle a CSS class on the element, ...

<a href="/home" ${routeActive('/home', 'active')}>Home</a>

Or set a boolean attribute or property with the result of the directive.

<button href="/home" ?disabled="${routeActive('/home')}">Home</button>