Ionic

If the example doesn't seem obvious, the following prerequisite reads are recommended:

Extending templating syntax

• extending templating syntax

The following is a code example of how to teach Aurelia to work seamlessly with Ionic Framework:

export class IonicFramework implements IRegistry {
    register(container: IContainer) {
        const attrMapper = container.get(IAttrMapper);
        const nodeObserverLocator = container.get(NodeObserverLocator);
        attrMapper.useTwoWay((el, property) => {
            if (el.tagName === 'ION-CHECKBOX' ||
                el.tagName === 'ION-TOGGLE'
            ) {
                return property === 'checked';
            }

            return el.tagName.startsWith('ION') && property === 'value';
        });
        const valuePropertyConfig = { events: ['ionChange'] };
        nodeObserverLocator.useConfig({
            'ION-INPUT': {
                value: valuePropertyConfig
            },
            'ION-TEXTAREA': {
                value: valuePropertyConfig
            },
            'ION-SELECT': {
                value: valuePropertyConfig
            },
            'ION-RADIO-GROUP': {
                value: valuePropertyConfig
            },
            'ION-RANGE': {
                value: valuePropertyConfig
            },
            'ION-SEARCHBAR': {
                value: valuePropertyConfig
            },
            'ION-SEGMENT': {
                value: valuePropertyConfig
            },
            'ION-TOGGLE': {
                checked: valuePropertyConfig
            },
            'ION-CHECKBOX': {
                checked: valuePropertyConfig
            }
        });
        return container;
    }
}

Inside startup of application add IonicFramework before the standard configuration usually main.ts

Aurelia.register(IonicFramework, StandardConfiguration);

Ordering matters when registering conventionally. Please look at the FAST Integration for a more verbose way where order does not matter.