{WidgetName}.html

• The {WidgetName}.html file is a snippet of HTML that makes up the content of a widget. When a user uses your Widget, this will replace the HTML contents of the tag that they used to reference it.
• The Template.html contains the following to get you started.
• <div class = "SIMRacingApps-Widget-Template"

data-ng-style = "{ height: height+'px' }"

data-ng-bind-html = "translations.KEY + ': '+data.Car.REFERENCE.Description.ValueFormatted"

></div>

• The outer element, most of the time a DIV, must be decorated with a class using the Widget’s name. Please adhere to the naming convention that each Widget has a unique class name by prefixing it with “SIMRacingApps-Widget-”. This allows users to put styles in the useroverrides.css for specific widgets.
• The “data-ng-style” attribute is an Angular Directive where the height of your Widget will be calculated based on the “width” the user assigns to the instance of your widget in their App. This keeps the aspect ratio from changing. See the {WidgetName}.js file for more info.
• The “data-ng-bind-html” is just an example of how you can get data from the SIM to update your HTML. Feel free to browse other Widget’s HTML file to see the many possibilities.
• Do not use the “id” attribute in a Widget, because a Widget can be added to the same page multiple times and this would cause a conflict. Ids must be unique on a page. Use the “class” attribute to identify elements and style them. With Angular, you rarely, if ever, need to do DOM manipulation beyond what Angular does for you.