This recipe demonstrates one technique for managing state in your Dojo 2 application which covers state injection into widgets.


  1. Create a widget which uses a property from this.properties:
render() {
    return v('div', [ this.properties.message ]);
  1. Wrap the widget created in step one with a Container by creating the file src/containers/MyWidgetContainer.ts and adding the following code:
import { Container } from '@dojo/widget-core/Container';
import MyWidget from './../widgets/MyWidget';

function getProperties(inject, properties) {
    return {
        message: inject.message

const MyWidgetContainer = Container(MyWidget, 'app-state', {

export default MyWidgetContainer;

Here are two notes on step 2:

  • 'app-state' is a string based identifier which must match the identifier you pass to registry.defineInjector as shown in step 3
  • The return value of the getProperties is passed onto the wrapped widget as this.properties.
  1. In your main file, include the following code:
import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
import { Registry } from '@dojo/widget-core/Registry';
import { Injector } from '@dojo/widget-core/Injector';
import MyWidgetContainer from './containers/MyWidgetContainer';

const registry = new Registry();
const myInjector = new Injector({
    message: 'This message is injected into the child widget'

registry.defineInjector('app-state', myInjector);

const Projector = ProjectorMixin(MyWidgetContainer);
const projector = new Projector();
projector.setProperties({ registry });


Further reading

The Dojo 2 State management tutorial covers state management in more detail.