Tutorial by Examples

export class MyViewModel { selectedFiles; } <template> <input type="file" files.bind="selectedFiles"> </template>

Strings Array When selecting a value in the select dropdown and providing an array of strings, the selected value will be bound to the select element's value property as a string that we can display using string interpolation. export class MyViewModel { animals = []; favouriteAnimal = nu...

Basic Checkboxes export class MyViewModel { favoriteColors = []; colors = ['Red', 'Yellow', 'Pink', 'Green', 'Purple', 'Orange', 'Blue']; } <template> <label repeat.for="color of colors"> <input type="checkbox" value.bind="color" ch...

Basic Radios export class MyViewModel { favoriteColor = null; colors = ['Red', 'Yellow', 'Pink', 'Green', 'Purple', 'Orange', 'Blue']; } <template> <label repeat.for="color of colors"> <input type="radio" name="colors" value.bind=&q...

Binding to the browser native style attribute using Aurelia. If using string interpolation, you should use the css alias so styling works in Internet Explorer. Style String export class MyViewModel { constructor() { this.styleString = 'color: #F2D3D6; background-color: #333'; } } &l...

When using show.bind the element remains in the page and is either hidden or visible through the use of display:none or display:block behind the scenes. export class MyViewModel { isVisible = false; } <template> <div show.bind="isVisible"><strong>I can be b...

Unlike show.bind when using if.bind the element will be removed from the page if the supplied binding value is false or added into the page if the value is true. export class MyViewModel { isVisible = false; } <template> <div if.bind="isVisible"><strong>If ...