Code Binding

Binding the WireBootstrap Angular component directly through code gives the implementation more control over when and how the binding takes place.

This section builds on the property binding example discussed in the previous section of this documentation.

Import the Component

To bind the component directly, start with the same HTML markup on the page view's HTML template for the component's container.

Neither the wire-component nor the config reference in the HTML tag are needed here as the configuration will be bound to the component directly in code in a later step. Instead, specify the selector for HTML element using the Angular pound # syntax so it can be referenced in code. This is equivalent to setting an HTML element's id attribute.

Below the same HTML table is declared with a #table selector.

<!-- example2.component.html -->
<table #table class="table">
</table>

Next, import the structures needed to render the component directly in the page view's component class. This includes the WireBootstrap Angular Component. See Sample Project for details on the location of the component.

import { Component, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
import { WireComponent } from '@wirebootstrap/wire-angular';

@Component({
    ...
    templateUrl: './example2.component.html'
}
export class Example2Component  {
    ...
}

Element Reference

Create a reference to the HTML table element created above using Angular's ViewChild property decorator. In the example below, this reference is defined in the table variable local to the page view class.

...
@Component({
  ...
  templateUrl: './example2.component.html'
}
export class Example2Component  {
  @ViewChild('table') table!: ElementRef;
}

Set up Angular's AfterViewInit lifecycle hook for the page view component. This is the hook needed to render the WireBootstrap Angular Component.

...
export class Example2Component implements AfterViewInit   {
    ...
    ngAfterViewInit() {
    }
}

Configuration

Next, create a local variable containing the configuration for the component inside the ngAfterViewInit function.

...
export class Example2Component implements AfterViewInit   {
    ...
    ngAfterViewInit() {
            
        // create the WireBootstrap Table component configuration
        const config: IWireComponentConfig = {
            ...
        }
    }
}

Render the Component

In the same function, create a new instance of the component passing in the table reference created above. Then call the render method.

The render method takes two parameters. The first is the fully qualified object reference name for the WireBootstrap component to be rendered. The second is the configuration for the component.

...
export class Example2Component implements AfterViewInit   {
    ...
    ngAfterViewInit() {
    
        // create the WireBootstrap Table component configuration
        const config: IWireComponentConfig = {
            ...
        }
        // create the WireBootstrap Angular Component instance
        const cmp = new WireComponent(this.table);       
        
        // render the WireBootstrap Table component using the configuration
        cmp.render("wire.bsTable", config);       
    }
}