ect-button-js

EctButtonJs

ect-button-js exposes EctButtonComponent as a Web Component for Vanilla JS, React, and other non-Angular front ends.

Build

npm run build:ect-button-js

Output bundle:

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

Registered tags:

• <ect-button>
• <ect-button-js>

Vanilla JS

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

<ect-button id="saveBtn"></ect-button>

<script>
  const button = document.getElementById('saveBtn');

  button.text = 'Save';
  button.type = 'primary';
  button.icon = 'fa fa-floppy-disk';
  button.hideText = false;

  button.addEventListener('on-click', () => console.log('Saved'));
</script>

React

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

type EctButtonEl = HTMLElement & {
  text: string;
  type: string;
  icon: string;
  hideText: boolean;
};

export function SaveButton() {
  const ref = useRef<EctButtonEl | null>(null);

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

    el.text = 'Save';
    el.type = 'primary';
    el.icon = 'fa fa-floppy-disk';
    el.hideText = false;

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

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

Inputs and Events

Supported input styles:

• Angular-style: Text, Type, HideText, DropDownOptions, etc.
• JS-friendly properties: text, type, hideText, dropDownOptions, etc.
• Kebab-case attributes: hide-text, text-before-icon, drop-down-options.

Events:

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

Dependencies

• ect-button
• @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