Platform: Link Component Technical Design

Link

Summary

Simple anchor link. See Fundamental-Styles implementation for reference.

Example

<fdp-link [href]="'#'"
    [hreflang]="'en'"
    [download]="'/path/to/download/file'"
    [media]="'print and (resolution:300dpi)'"
    [rel]="'nofollow'"]
    [target]="target"
    [type]="'text/html'">Link</fdp-link>
<fdp-link [href]="'#'"[disabled]="true">Disabled Link</fdp-link>

Property Bindings

download: String

The filename of the file which will be downloaded when the user clicks on the link.

href: String

URL of the page the link references.

hreflang: String

The language of the linked document. (e.g. 'en', 'fr', 'de', 'jp')

media: String

The media/device that the linked document is optimized for.

rel: String

The relationship between current document and linked document. (e.g. 'alternate', 'external', 'nofollow')

target: String

Specifies where to open the linked document.

type: String

The media type of the linked document.

disabled: Boolean

Sets link in "disabled" mode.

Template

<a class="fd-link" [attr.href]="href" [attr.aria-disabled]="disabled"><ng-content></ng-content></a>

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• fdp-link can be supported normally with i18n marker:

<fdp-link
    i18n="@@linkText"
    [href]="'#'"
    [hreflang]="'en'"
    [download]="'/path/to/download/file'"
    [media]="'print and (resolution:300dpi)'"
    [rel]="'nofollow'"]
    [target]="target"
    [type]="'text/html'">
    Link
</fdp-link>

Redesign Required: No

---

Notes

Reference to link attributes: https://www.w3schools.com/tags/tag_a.asp