HTML with Angular Bindings

This example shows how to create a dynamic HTML code by binding some global variables. It also shows how to display an error message from an error code.

Change the toggle on the right to change the color of the LED and enter a value to decode it as an HTTP code. Enter for example 404 (=> not found) of 401 (=> unauthorized).

Hardware

No hardware is needed for this example. You can run it without being logged in.

UI components

Open the inner code of the HtmlExample component to see how these bindings are created. In this example, both 'errorColor' and errorCode are Variables imported from the dataflow.

The syntax for accessing Data Flow variables is as follows:

    'DATAFLOW_VARIABLE_NAME' | dashboardValue | async

where DATAFLOW_VARIABLE_NAME is the name of the variable as declared in the Dataflow.

dashboardValue and async are Angular pipes needed to retrieve the actual value of the variable from its name.

💡 Note:

• This feature is specific to Angular.

• Learn more on Angular bindings here

Dataflow graph

The graph build the two global variables to be linked to the HTML code.