Using BAgel with single page applications

Links and routing

Single page applications (SPAs) will typically hijack standard link behaviour so that they can achieve the equivalent navigation using javascript, without having to do a full page load.

In Angular, for example, the framework takes in information about the target URL path and how to handle parameters, builds the associated href, applies it to the <a> element and then adds a click handler to override the default link behaviour to navigate without a page load.

Anchor (<a>) tags

Anchor links are placed in the light DOM and your SPA logic can be applied directly to them.

Links in the shadow dom of BAgel components

To allow SPA link behaviour to be applied to BAgel links as well, an internal click event from the shadow <a> element is exposed via a baClick event.

document.querySelector('ba-link').addEventListener('baClick', (event) => {
  event.detail.preventDefault();
  // Now apply custom SPA routing...
});