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.
| 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