EctLinkJs

ect-link-js exposes EctLinkComponent as a Web Component for Vanilla JS and React projects.

Build

npm run build:ect-link-js

Output bundle:

• dist/ect-link-js/main.js

Registered tags:

• <ect-link>
• <ect-link-js>

Vanilla JS

<script type="module" src="../../dist/ect-link-js/main.js"></script>

<ect-link id="helpLink"></ect-link>

<script>
  const link = document.getElementById('helpLink');
  link.href = 'https://example.com/help';
  link.text = 'Help';
  link.target = '_blank';
  link.cssClasses = 'a-link-standard';

  link.addEventListener('on-click', () => console.log('Link clicked'));
</script>

React

import { useEffect, useRef } from 'react';
import '../../dist/ect-link-js/main.js';

type EctLinkEl = HTMLElement & {
  href: string;
  text: string;
  target: string;
  cssClasses: string;
};

export function HelpLink() {
  const ref = useRef<EctLinkEl | null>(null);

  useEffect(() => {
    const el = ref.current;
    if (el == null) return;

    el.href = 'https://example.com/help';
    el.text = 'Help';
    el.target = '_blank';
    el.cssClasses = 'a-link-standard';

    const onClick = () => console.log('Link clicked');
    el.addEventListener('on-click', onClick);
    return () => el.removeEventListener('on-click', onClick);
  }, []);

  return <ect-link ref={ref}></ect-link>;
}

Inputs and Events

Supported input styles:

• Angular-style: Href, Text, CssClasses, Icon, Target, ViewScale
• JS-friendly properties: href, text, cssClasses, icon, target, viewScale
• Kebab-case attributes: href, css-classes, view-scale, etc.

Events:

• onClick (original Angular output)
• on-click (web alias)

Dependencies

• ect-link
• @angular/elements
• zone.js

Further help

• https://angular-grid.net/

Licence

The licence agreement for this paid component can be found here:

• https://angular-grid.net/assets/licence/licence_agreement.txt