Link of the design system. Applied to an <a> with a href, so that the browser keeps treating it as a
link, or to any other element, which makes it a pseudo link that acts as a button. The component renders the
text between the kbqLinkPrefix and kbqLinkSuffix content, and only the text is underlined.
@Component({ selector: '[kbqLink]', exportAs: 'kbqLink' }) class KbqLink { readonly disabled = input<boolean>(false); readonly pseudo = input<boolean>(false); readonly external = input<boolean>(false); readonly underline = input<KbqLinkUnderline>(); readonly size = input<KbqDefaultSizes>(this.options.size); readonly useVisited = input<boolean>(this.options.useVisited); readonly print = input<string | null>(); focus(): void; getHostElement(): HTMLElement; }
disabledboolean Whether the link is disabled.
pseudoboolean Whether an <a> is a pseudo link: a control without a href that looks like a link. Any other element is
a pseudo link anyway. A pseudo link gets the button role and is activated with Enter and Space, unless
the element is a <button> or a <label>, declares a role of its own in the template, or is taken out of
the tab order with a negative tabIndex. A key that another directive on the element has already handled,
as kbqDropdownTriggerFor does, is left to it.
externalboolean Whether the link leads outside the product. Adds the external link icon after the text. It does not set
target: bind target="_blank" as well to open the page in a new tab.
underlineKbqLinkUnderline When the text is underlined. Defaults to the app-wide KBQ_LINK_OPTIONS, and without one there to
always for a link and hover for a pseudo link.
sizeKbqDefaultSizes Size of the link: its typography and the gaps to its icons. Defaults to the app-wide
KBQ_LINK_OPTIONS.
useVisitedboolean Whether a visited link is styled differently. Defaults to the app-wide KBQ_LINK_OPTIONS.
printstring | null What to print after the link text when the page is printed. An empty string, which a valueless print
attribute is, prints the href without its protocol and www.; any other string is printed as is. Unbound
or null, nothing is printed.
focus()void Focuses the link.
getHostElement()HTMLElement The element the link is applied to.
Marks content to be projected before the text of a link, such as a leading icon.
@Directive({ selector: '[kbqLinkPrefix]' }) class KbqLinkPrefix {}
Marks content to be projected after the text of a link: a trailing icon, or the punctuation that ends a sentence, which takes the link color without the underline. It wraps to the next line together with the last word only.
@Directive({ selector: '[kbqLinkSuffix]' }) class KbqLinkSuffix {}
Overrides the default link options within the given injector scope: the whole application from
bootstrapApplication, or one subtree from the providers of a component or a route.
function kbqLinkOptionsProvider( options: Partial<KbqLinkOptions> ): Provider;
Settings a whole application shares, rather than something a single link decides: how big links are, when they are underlined and whether visited ones stand out. Where a link leads and how it behaves stay on the link itself.
type KbqLinkOptions = { size: KbqDefaultSizes; underline?: KbqLinkUnderline; useVisited: boolean; };
sizeKbqDefaultSizes Size of a link: its typography and the gaps to its icons.
underlineKbqLinkUnderline When the text of a link and of a pseudo link is underlined. Unset, a link is always underlined and a pseudo link only on hover.
useVisitedboolean Whether a visited link is styled differently.
When the text of a link is underlined: always, only while the pointer is over the link, or never.
type KbqLinkUnderline = 'always' | 'hover' | 'none';Injection token holding the current KbqLinkOptions.
const KBQ_LINK_OPTIONS: InjectionToken<KbqLinkOptions>;