@onUpdated
The @onUpdated decorator registers a callback method that executes automatically whenever a specific reactive property or field changes. It is the primary way to perform side effects on Radiant hosts.
Usage
import { RadiantElement, customElement, onUpdated, prop } from '@ecopages/radiant';
@customElement('user-greeting')
export class UserGreeting extends RadiantElement {
@prop({ type: String }) declare name: string;
@onUpdated('name')
updateGreeting() {
// Receives no arguments; access the new value via this.name
this.textContent = `Hello, ${this.name}!`;
}
}Parameters
| Parameter | Type | Required | Description |
|---|---|---|---|
propertyName | string | Yes | Name of the property or field to watch. |
Feature Highlight
Watching Multiple Properties
A single method can watch multiple properties by applying the decorator multiple times.
@onUpdated('firstName')
@onUpdated('lastName')
updateFullName() {
this.fullNameElement.textContent = `${this.firstName} ${this.lastName}`;
}Derived State
Calculate and update internal state derived from public properties.
@prop({ type: Array }) declare items: CartItem[];
@state total = 0;
@onUpdated('items')
calculateTotals() {
this.total = this.items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
}DOM Synchronization
Keep the DOM or external state in sync with component properties.
@onUpdated('theme')
applyTheme() {
document.documentElement.setAttribute('data-theme', this.theme);
localStorage.setItem('theme', this.theme);
}RadiantController usage
@onUpdated(...) also works on RadiantController, which makes it useful for synchronizing host attributes or imperative DOM after controller state changes.
import { RadiantController, onUpdated, state } from '@ecopages/radiant';
export class ThemeController extends RadiantController {
@state theme = 'light';
@onUpdated('theme')
applyTheme() {
this.host.setAttribute('data-theme', this.theme);
}
}