Add Button

Provides a global add button in the page.

Add Button

In the presence of this component, the standard buttons embedded into other page widgets (e.g. Customer List) are discarded.

By using the "floating-rounded-button" CSS class, for mobile app you can display a button floating on the list bottom.

Template Syntax

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

<!-- Add thing button -->
<add-button icon="add" label="Add Thing" resource="THING"></add-button>

<!-- Add customer button floating on the page bottom for mobile apps -->
<add-button icon="add" class="floating-rounded-button" label="" resource="CUSTOMER" *ngIf="isMobile()"></add-button>

Component Reference

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

Add Button `<add-button>`

Icon	The Angular Material icon displayed inside the add button (e.g. add). Name: icon Type: STRING \| Optional `icon="fas fa-thermometer"`
Label	The label displayed inside the add button. Name: label Type: STRING \| Optional `label="abc"`
Resource	The resource on which to create the new object. Name: resource Type: ENUM \| Required Values: THING, LOCATION, CUSTOMER, PARTNER, TAG Default Value: THING `resource="THING"`
Tooltip	The tooltip displayed over the add button. Name: tooltip Type: STRING \| Optional `tooltip="abc"`
Rendering
CSS Class	The name(s) of the CSS class used to customize the widget layout. Name: class Type: STRING \| Optional `class="my-custom-class"`
Visibility Condition	The expression that allows you to reduce the visibility of the element. Name: ngIf Type: STRING \| Optional `ngIf="getUser().organizationId != null"`

Add Button

Template Syntax

Component Reference

Add Button <add-button>

Add Button `<add-button>`