Controller

Holds presentation state and actions for a route's template.

Since Ember 4/5 (Octane) Spec ↗

Syntax

class X extends Controller { @tracked field; }

Returns

Controller — A singleton controller class for a route.

Examples

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class PostsController extends Controller {
  queryParams = ['sort'];
  @tracked sort = 'recent';

  @action
  setSort(value) {
    this.sort = value;
  }
}

Notes

Controllers are long-lived singletons, so reset transient state in the route's resetController hook. They are mainly used today for query params; component-driven UI often makes a controller unnecessary.