Learn AURELIA with Real Code Examples

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch to ${isDark ? 'Light' : 'Dark'} Theme</button>
</div>

A basic counter with increment, decrement, reset, and theme toggle.

export class Counter {
    count = 0;
    step = 5;
    isDark = false;

    increment() { this.count += this.step; }
    decrement() { this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter that increments/decrements by a custom step value.

export class Counter {
    count = 0;
    min = 0;
    max = 10;
    isDark = false;

    increment() { if(this.count < this.max) this.count++; }
    decrement() { if(this.count > this.min) this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that respects maximum and minimum limits.

export class Counter {
    count = 1;
    isDark = false;

    increment() { this.count *= 2; }
    decrement() { this.count = Math.floor(this.count / 2); }
    reset() { this.count = 1; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">Double</button>
        <button click.delegate="decrement()">Half</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

A counter that doubles the value on increment.

export class Counter {
    count = 0;
    history = [];
    isDark = false;

    increment() { this.count++; this.history.push(this.count); }
    decrement() { this.count--; this.history.push(this.count); }
    reset() { this.count = 0; this.history.push(this.count); }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <p>History: <span repeat.for="value of history">${value} </span></p>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that keeps a history of values.

export class Counter {
    count = 0;
    auto = false;
    isDark = false;

    autoToggle() {
        this.auto = !this.auto;
        if(this.auto) this.timer = setInterval(() => this.count++, 1000);
        else clearInterval(this.timer);
    }

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
        <button click.delegate="autoToggle()">${auto ? 'Stop Auto' : 'Start Auto'}</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that can auto-increment every second.

export class Counter {
    count = 0;
    min = 0;
    max = 50;
    step = 5;
    isDark = false;

    increment() { if(this.count + this.step <= this.max) this.count += this.step; }
    decrement() { if(this.count - this.step >= this.min) this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter with min, max, and custom step value.

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }

    get parity() { return this.count % 2 === 0 ? 'Even' : 'Odd'; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count} (${parity})</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that indicates if current count is even or odd.

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    doubleIncrement() { this.count += 2; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()" dblclick.delegate="doubleIncrement()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter increments faster on double click.

export class Counter {
    count = 0;
    theme = 'light';

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() {
        this.theme = this.theme === 'light' ? 'dark' : this.theme === 'dark' ? 'blue' : 'light';
    }
}

<div class.bind="theme + '-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter supporting multiple color themes.