Class WebzComponentAbstract

Description

A base class for creating web components

Export

Abstract

WebzComponent

Example

class MyComponent extends WebzComponent {
  constructor() {
    super("<h1>Hello World</h1>", "h1{color:red;}");
  }
}

Hierarchy (view full)

Constructors

constructor

Properties

css html htmlElement shadow styles template resizeEvent

Accessors

onResizeEvent

Methods

addComponent addRouter appendToDomElement click focus getValue getWindowSize removeComponent ajax

Constructors

constructor

Properties

Private css

css: string

The css as a string to be used as the style of this component

Private html

html: string

The html as a string to be used as the body of this component

Private htmlElement

htmlElement: HTMLElement

Private shadow

shadow: ShadowRoot

Private styles

styles: HTMLStyleElement

Private template

template: HTMLTemplateElement

Static Private resizeEvent

resizeEvent: Notifier<SizeInfo> = ...

Accessors

onResizeEvent

Methods

addComponent

  • addComponent(component, id?, front?): void

  • Parameters

    • component: WebzComponent

      The component to add

    • id: string = "root"

      The id of the element to append the component to (optional)

    • front: boolean = false

    Returns void

    void

    Description

    Add a component to the dom

    Memberof

    WebzComponent

    Example

    component.addComponent(childComponent);
      component.addComponent(childComponent, "myDiv");

addRouter

  • addRouter(routes, id?): void

  • Parameters

    • routes: Route[]
    • id: string = "root"

      The id of the element to append the router to (optional)

    Returns void

    the router

    Description

    Add a router to the component

    Memberof

    WebzComponent

    Example

    component.addRouter(router);

appendToDomElement

  • appendToDomElement(domElement): void

  • Parameters

    • domElement: HTMLElement

    Returns void

    void

    Description

    Append the component to a dom element

    Memberof

    WebzComponent

    Example

    component.appendToDomElement(document.getElementById("myDiv"));

click

focus

getValue

  • getValue(elementId): string

  • Parameters

    • elementId: string

      The id of the element to get the value of

    Returns string

    string | undefined

    Description

    Get the value of an element on this component.

    Throws

    Error when element does not have a value property or does not exist

    Memberof

getWindowSize

Protected removeComponent

Static ajax

  • ajax<T>(url, method, headers?, data?): Notifier<T>

  • Type Parameters

    • T = any

    Parameters

    • url: string

      The URL to make the AJAX call to

    • method: HttpMethod

      The HTTP method to use (GET or POST)

    • headers: any[] = []

      The headers to send with the request (optional)

    • Optional data: any

      The data to send in the request body (optional)

    Returns Notifier<T>

    A promise that resolves with the response data

    Description

    Makes an AJAX call

    Memberof

    WebzComponent

    Static

    Example

    myComponent.ajax("https://some.api.url.com/posts", HttpMethod.GET)
     .subscribe((data) => {
      console.log(data);
    }, (error) => {
      console.error(error);
    });

Settings

Member Visibility

Theme

On This Page

constructorcsshtmlhtmlElementshadowstylestemplateresizeEventonResizeEventaddComponentaddRouterappendToDomElementclickfocusgetValuegetWindowSizeremoveComponentajax

Generated using TypeDoc