> For the complete documentation index, see [llms.txt](https://docs.wirebootstrap.com/angular/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wirebootstrap.com/angular/wirebootstrap-angular-component/code-binding.md).

# 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](/angular/wirebootstrap-angular-component/property-binding.md) 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.

```html
<!-- 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](/angular/sample-project.md#angular-component) for details on the location of the component.

```typescript
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](https://angular.io/api/core/ViewChild) property decorator.  In the example below, this reference is defined in the `table` variable local to the page view class.

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

Set up Angular's [AfterViewInit](https://angular.io/api/core/AfterViewInit) lifecycle hook for the page view component.  This is the hook needed to render the WireBootstrap Angular Component.

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

## Configuration

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

```typescript
...
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. &#x20;

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.

```typescript
...
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);       
    }
}
```