1 of 3

Integration

The basics of integrating web component libraries with Aurelia.

Here's what you'll learn...

How to integrate with Microsoft FAST web components.
How to integrate with Ionic web components.
And more to be updated...

Integrating with Microsoft FAST web components

The guide for the integration here

Integrating with Ionic web components

The guide for the integration here

For our community

It is difficult for the core team members to try and test and document all possible integrations with web component frameworks/libraries. It is helpful that everyone in our community could lend a hand building the examples together, starting with the library choice of yours.

Microsoft FAST

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

The following is a code example of how to teach Aurelia to work seamlessly with Microsoft FAST:

import { AppTask, IContainer, IAttrMapper, NodeObserverLocator } from 'aurelia';

Aurelia.register(AppTask.creating(IContainer, container => {
  const attrMapper = container.get(IAttrMapper);
  const nodeObserverLocator = container.get(NodeObserverLocator);
  attrMapper.useTwoWay((el, property) => {
    switch (el.tagName) {
      case 'FAST-SLIDER':
      case 'FAST-TEXT-FIELD':
      case 'FAST-TEXT-AREA':
        return property === 'value';
      case 'FAST-CHECKBOX':
      case 'FAST-RADIO':
      case 'FAST-RADIO-GROUP':
      case 'FAST-SWITCH':
        return property === 'checked';
      case 'FAST-TABS':
        return property === 'activeid';
      default:
        return false;
    }
  });

  // Teach Aurelia what events to use to observe properties of elements.
  // Because FAST components all use a single change event to notify,
  // we can use a single common object
  const valuePropertyConfig = { events: ['input', 'change'] };
  nodeObserverLocator.useConfig({
    'FAST-CHECKBOX': {
      checked: valuePropertyConfig
    },
    'FAST-RADIO': {
      checked: valuePropertyConfig
    },
    'FAST-RADIO-GROUP': {
      value: valuePropertyConfig
    },
    'FAST-SLIDER': {
      value: valuePropertyConfig
    },
    'FAST-SWITCH': {
      checked: valuePropertyConfig
    },
    'FAST-TABS': {
      activeid: valuePropertyConfig
    },
    'FAST-TEXT-FIELD': {
      value: valuePropertyConfig
    },
    'FAST-TEXT-AREA': {
      value: valuePropertyConfig
    }
  });
}))

Ionic

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

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.

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.

Integration

The basics of integrating web component libraries with Aurelia.

Here's what you'll learn...

How to integrate with Microsoft FAST web components.
How to integrate with Ionic web components.
And more to be updated...

Integrating with Microsoft FAST web components

The guide for the integration here

Microsoft FAST

Integrating with Ionic web components

The guide for the integration here

Ionic

For our community

Microsoft FAST

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

Extending templating syntax

Attribute mapping

The following is a code example of how to teach Aurelia to work seamlessly with Microsoft FAST:

import { AppTask, IContainer, IAttrMapper, NodeObserverLocator } from 'aurelia';

Aurelia.register(AppTask.creating(IContainer, container => {
  const attrMapper = container.get(IAttrMapper);
  const nodeObserverLocator = container.get(NodeObserverLocator);
  attrMapper.useTwoWay((el, property) => {
    switch (el.tagName) {
      case 'FAST-SLIDER':
      case 'FAST-TEXT-FIELD':
      case 'FAST-TEXT-AREA':
        return property === 'value';
      case 'FAST-CHECKBOX':
      case 'FAST-RADIO':
      case 'FAST-RADIO-GROUP':
      case 'FAST-SWITCH':
        return property === 'checked';
      case 'FAST-TABS':
        return property === 'activeid';
      default:
        return false;
    }
  });

  // Teach Aurelia what events to use to observe properties of elements.
  // Because FAST components all use a single change event to notify,
  // we can use a single common object
  const valuePropertyConfig = { events: ['input', 'change'] };
  nodeObserverLocator.useConfig({
    'FAST-CHECKBOX': {
      checked: valuePropertyConfig
    },
    'FAST-RADIO': {
      checked: valuePropertyConfig
    },
    'FAST-RADIO-GROUP': {
      value: valuePropertyConfig
    },
    'FAST-SLIDER': {
      value: valuePropertyConfig
    },
    'FAST-SWITCH': {
      checked: valuePropertyConfig
    },
    'FAST-TABS': {
      activeid: valuePropertyConfig
    },
    'FAST-TEXT-FIELD': {
      value: valuePropertyConfig
    },
    'FAST-TEXT-AREA': {
      value: valuePropertyConfig
    }
  });
}))