@terminus/ui-link NPM

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-link

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Wrap your link text and define a destination:

<ts-link [destination]="['your', 'path']">My link</ts-link>

External links

To signify a link will leave the current app or site, set external to true. When the destination is a string and contains either mailto or tel, the external icon would not show.

<ts-link
  [destination]="http://google.com"
  [external]="true"
>My link</ts-link>

NOTE: When external is set to true, the link should be a standard link in string form.

Tab index

A custom tabindex can also be set:

<ts-link
  [destination]="http://google.com"
  [tabIndex]="2"
>My link</ts-link>

Local URL fragments

Local fragments are supported for deep linking within a page:

<ts-link
  [destination]="['your', 'path']"
  fragment="myFragment"
  [tabIndex]="2"
>My link</ts-link>
<!-- This would route to: `/your/path#myFragment -->

If no destination is defined, it will fallback to the local page: ['.']:

<ts-link
  fragment="myFragment"
  [tabIndex]="2"
>My link</ts-link>
<!-- If used on the route `/my/home`, this would route to: `/my/home#myFragment` -->

Router changes to support local links

There are a couple needed Router configuration changes to support local links:

import { NgModule } from '@angular/core';
import {
  ExtraOptions,
  RouterModule,
  Routes,
} from '@angular/router';

const myRoutes: Routes = [...];
const routerOptions: ExtraOptions = {
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled',
};

@NgModule({
  ...
  imports: [RouterModule.forRoot(myRoutes, routerOptions)],
  ...
})