GH HTML ELEMENT

⚙️ Attributes

| Attribute | Description | |------------------|-----------------------------------------------------------------------------| | app-id | Application ID of the element. | | item-id | Item ID of the element. | | field-id | Field ID of the element. | | value | Value of the element. | | gh-model | Path to the object where the element’s value is stored or retrieved from. | | onclick | Binds a method from the parent component to the click event. Executes function with arguments from attribute. | | onchange | Binds a method from the parent component to the change event. Executes function with arguments from attribute. | | onsubmit | Binds a method from the parent component to the submit event. Executes function with arguments from attribute. | | onmousedown| Binds a method from the parent component to the mousedown event. Executes function with arguments from attribute. |

📖 Available Methods

| Method | Description | Arguments | Usage Example | |--------|-------------|-----------|---------------| | render(html: string) | Renders plain HTML inside the component. Supports template literals with component properties (including value). | • html (string) – HTML string to render. | this.render("<div>Hello</div>") | | renderAngularElement(container: HTMLElement, template: string, scope: object = {}) | Renders an Angular directive/component (e.g. gh-view, gh-element) inside the Web Component. | • container (HTMLElement) – element where compiled Angular template will be inserted.• template (string) – Angular template string.• scope (object, optional) – scope variables passed into Angular template. | this.renderAngularElement(this, "<gh-view></gh-view>", {user: this.value}) | | observe(variable: string, callback: Function) | Creates a getter/setter pair on the component that watches a variable. The callback is triggered when the variable is updated. | • variable (string) – name of the property to observe.• callback (Function) – function executed when the variable changes. | this.observe("userName", () => console.log(this.userName)) |

Here is example:

class Simple extends GhHtmlElement {
  constructor() {
      super();
       this.text = 'Text';
  }
  
   connectedCallback() {
   	this.render()
   	this.observe('text', () => {
    	  this.render();
      });
    }
  
  render () {
		this.innerHTML = `<p>${this.text}</p>`;
  }
}
window.customElements.define('simple-element', Simple);
const simple = document.createElement('simple-element');
setTimeout(() => {
	simple.data.text = 'Hello World!';	
}, 1000)

document.body.append(simple);