OWL JS Components – The Class-Based Component Model

import { Component, xml } from "@odoo/owl";

class Greeting extends Component {
  static template = xml`
    <div>Hello, World!</div>
  `;
}

export default Greeting;

import { Component, xml, useState } from "@odoo/owl";
import ChildComponent from "./ChildComponent";

class UserCard extends Component {
  // ── Static properties ──────────────────────────────────────────────

  // 1. Template (required) — the QWeb XML for this component
  static template = xml`
    <div class="user-card" t-att-class="{ active: state.isActive }">
      <h2 t-esc="props.name"/>
      <p t-esc="props.email"/>
      <ChildComponent count="state.clicks"/>
      <button t-on-click="toggle">Toggle</button>
    </div>
  `;

  // 2. components — child components used in the template (must be registered here)
  static components = { ChildComponent };

  // 3. props — prop type declarations (optional but strongly recommended)
  static props = {
    name:  { type: String },
    email: { type: String, optional: true },
  };

  // 4. defaultProps — default values for optional props
  static defaultProps = {
    email: "not provided",
  };

  // ── Instance members ───────────────────────────────────────────────

  // Reactive state — changes here trigger re-render
  state = useState({ isActive: false, clicks: 0 });

  // Instance method (event handler)
  toggle() {
    this.state.isActive = !this.state.isActive;
    this.state.clicks++;
  }
}

import { mount } from "@odoo/owl";
import App from "./App";

// Mount to a DOM node
mount(App, document.getElementById("app"));

// mount() also accepts an options object (second positional arg replaced by options in OWL 2)
mount(App, document.getElementById("app"), {
  props: { title: "My OWL App" },  // props to pass to the root
  dev: true,                        // enable dev mode (prop checks, warnings)
  translateFn: (str) => str,        // i18n translation function
});

import { Component, xml, useState } from "@odoo/owl";

// ── Child component ────────────────────────────────────────────────
class TodoItem extends Component {
  static template = xml`
    <li>
      <span t-esc="props.text"/>
      <button t-on-click="() => props.onDelete(props.id)">✕</button>
    </li>
  `;

  static props = {
    id:       { type: Number },
    text:     { type: String },
    onDelete: { type: Function },  // callback prop
  };
}

// ── Parent component ───────────────────────────────────────────────
class TodoList extends Component {
  static components = { TodoItem };

  static template = xml`
    <div>
      <h1>Todos</h1>
      <ul>
        <TodoItem
          t-foreach="state.todos"
          t-as="todo"
          t-key="todo.id"
          id="todo.id"
          text="todo.text"
          onDelete.bind="deleteTodo"
        />
      </ul>
    </div>
  `;

  state = useState({
    todos: [
      { id: 1, text: "Learn OWL JS" },
      { id: 2, text: "Build an Odoo module" },
    ],
  });

  deleteTodo(id) {
    const idx = this.state.todos.findIndex(t => t.id === id);
    if (idx !== -1) this.state.todos.splice(idx, 1);
  }
}

<!-- 1. String literal — value in quotes is a plain string -->
<UserCard name="'Alice'" />

<!-- 2. JavaScript expression — quotes contain any JS expression -->
<UserCard name="user.firstName + ' ' + user.lastName" />

<!-- 3. Shorthand for boolean true -->
<UserCard isAdmin />     <!-- equivalent to isAdmin="true" -->

<!-- 4. Bound method (preserves 'this') -->
<UserCard onSave.bind="saveUser" />

<!-- In template: no 'this.' needed -->
<div>
  <span t-esc="props.username"/>
  <span t-esc="state.count"/>
  <span t-esc="computedValue"/>   <!-- JS getter on the class -->
</div>

class MyComponent extends Component {
  state = useState({ count: 0 });

  get computedValue() {
    // 'this' works in getters and methods
    return this.state.count * 2;
  }

  increment() {
    this.state.count++;  // direct mutation — OWL detects it
  }
}

/** @odoo-module **/
import { Component, xml } from "@odoo/owl";
import { registry } from "@web/core/registry";

class MyWidget extends Component {
  static template = xml`
    <div class="my-widget">
      <span t-esc="props.record.data.name"/>
    </div>
  `;

  static props = {
    record: Object,
  };
}

// Register in the "fields" registry to use as a custom field widget
registry.category("fields").add("my_widget", {
  component: MyWidget,
});

export default MyWidget;