Link Element

Displays a button that the user can click to navigate to another page.

Link Element

You can put this element directly in the grid area as an independent button, once clicked the referenced URL is navigated.

The URL you want to navigate is an application URL, which can be relative to the current navigated page (e.g. consumption), or absolute (e.g. /main/statistics)

In the alternative, you can put the link-element in a widget, doing so the widget will display it at its bottom, or depending on the widget, the entire widget will be clickable (e.g. gauges).

Embedded Link Element

Template Syntax

Below you can find some examples of how to use the component within a template.


/* standalone button */
<link-element url="/overview" label="Overview" description="Go to the overview page"></link-element>


/* embedded button */
<thing-details-widget title="Info">
    
    <property name="serialNumber"></property>
    <property name="thingDefinition.name" label="Model Name"></property>
    
    <link-element url="consumption" description="Displays the thing consumption"></link-element>
    
</thing-details-widget>

Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

Link Element <link-element>
PROPERTIES
CSS Class	The name(s) of the CSS class used to customize the widget layout. Type: STRING \| Optional class="my-custom-class"
Description	The description text to be displayed as tooltip on the link element. Type: STRING \| Optional description="Lorem ipsum dolor sit amet..."
Icon	The Google Fonts icon (e.g. home) or Font Awesome icon (e.g. fas fa-home) to be displayed before the link label. Type: STRING \| Optional icon="star"
Label	The alternative label displayed by the widget. Type: STRING \| Optional label="Temperature"
URL	The URL to browse, '/...' for application relative URL, 'https://....' for external URLs, else it is considered relative to the current page. Type: STRING \| Required url="fooBar"
Visibility Condition	The expression that allows you to reduce the visibility of the element. Type: STRING \| Optional *ngIf="getUser().organizationId != null"