Binding data to widgets

Qlik Sense and widgets use AngularJS. To understand how data binding in widgets works, you must also understand the basics of data binding in AngularJS.

The scope

All data (dimensions and measures,) and all properties, are stored and exposed in the scope of your widget. You can use the entire scope and bind data to make widgets dynamic.

Qlik Sense automatically updates the scope when, for example, a selection is made while AngularJS, depending on your underlying scope, updates the UI.

Available properties

The following properties are available to be bound to your HTML or your CSS templates.

General properties

Name Property
Title {{settings.title}}
Subtitle {{settings.subtitle}}
Footnote {{settings.footnote}}

Inline binding

The easiest way of binding an HTML element to data is by using double curly braces: {{my_property}}. If you want to inject the value of the settings.title property somewhere in your HTML structure, you insert the following statement:

{{settings.title}}

Everything inside the curly braces will be automatically replaced with the appropriate value. If the content within the curly braces cannot be found, an empty string will be returned.

AngularJS and widgets

Data binding is realized using AngularJS. Further information can be found on the AngularJS documentation page.

The following topics are worth reading within the context of widgets:

  • ngClass
  • ngClassEven
  • ngClassOdd
  • ngHide
  • ngShow
  • ngIf
  • ngRepeat

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?