Reactive properties #

Jwc components have reactive properties. These properties are automatically updated when the component is updated.

@Component({ name: "app-element" })
export class App extends JwcComponent {
  @Prop() name: string = "World";
  override render() {
    return <div>{this.name}</div>;
  }
}

// no yet implemented

<app-element name="John"></app-element>

Class Based #

In a class based component, you can define reactive properties by adding a @Prop decorator to a property.

@Prop({ type: String, default: "World" }) name: string;

The @Prop decorator takes an object with the following properties:

• type - The type of the property. This is used to convert the property to the correct type. The default type is string.
• default - The default value of the property. This is used when the property is not set. The default value is undefined.

To define the value of the property (like name) in html, you can use the name attribute.

<app-element name="John"></app-element>

Function Based Not yet implemented #

Not yet implemented