Created on September 03, 2019, Last modified on May 19, 2022

Components is a way to make them reusable and extendable across your application.

Create a component

You can create components with your template.

class MyComponent extends lng.Component {
    static _template() {
        return {
            //Component template

    _init() {
        // fires when a component is instantiated.
        // check the full list of events below

    //... more code, methods, events... 
    // active, attach, detach etc........describe order

Component events

There are a couple of lifecycle events that you can implement by specifying the specific method.

_construct()Instance created, before spawning the template
_build()Instance created, spawned the template
_setup()Attached to the render tree, top-down (for the first time)
_init()Attached (for the first time)
_attach()Attached to the render tree, bottom-up
_detach()Detached, bottom-up
_firstEnable()Enabled (for the first time)
_enable()Enabled (both attached and visible: true and alpha > 0)
_disable()Disabled (either detached or invisible or both)
_firstActive()Activated (for the first time)
_active()Activated (both enabled and on screen)
_inactive()Inactive (either detached, invisible or off screen)

Creating a Component

To create an instance of an Component, use the type attribute in your template.

class MyApp extends lng.Application {
    static _template() {
        return {
            MyComponentInstance: {
                type: MyComponent

Passing attribute data

You can pass some extra parameters that will be accessible to the component when initializing:

MyComponentInstance: {
    type: MyComponent,

Your instance will be initialized with your data available:

_init() {
    console.log(this.someData) //logs the content of someData

Give feedback

Rating - 4.2 / 5. . Reviews - 5

No votes so far! Be the first to rate this post.

Go To Top