Aurelia uses a naming convention to tie classes (or controllers) to their views. Our class is named App, and therefore the Aurelia runtime will search within the same directory as the class to find an HTML template with the same name. It will therefore tie app.ts to app.html, and use app.html as a template.

We will modify the existing app.html with the following snippet:

<template> 
 
  <require from="bootstrap/dist/css/bootstrap.css"></require> 
 
  <h1>${Title}</h1> 
  <ul> 
    <div repeat.for="item of items" > 
      <button style="margin: 5px;" class="btn btn-primary"> 
         ${item.DisplayName}</button> 
    </div> 
  </ul> 
 
  <div> 
    Selected Item : ${SelectedItem.Id} - ${SelectedItem.DisplayName} 
  </div> 
</template> 

Here, we have wrapped an HTML fragment within a <template> tag. The first line of this template uses a <require> tag with a from property that references the bootstrap.css file. This is the Aurelia convention for including external dependencies within a template. Note that we will need to install Bootstrap using npm as usual before this file becomes available. The template then defines an <h1> tag that uses the ${propertyName} syntax to render the model's property named Title. We then have a <ul> tag, and within this a <div> tag.

The <div> tag in this instance is the interesting part of this template. Note how we have injected an attribute named repeat.for="item of items". This syntax is specific to Aurelia, and will loop through the items property of the App class, and repeat the <div> tag for each individual item. This will then be made available to the <div> tag via a variable named item. We could have called this arrayItem, in which case our code would need to be repeat.for="arrayItem of items".

Within the <div> tag, we are simply creating a <button> tag, and using the data binding syntax of ${item.DisplayName} to render the DisplayName property of each array member.