Property Binding

When using property or declarative binding in Angular, the component and it's bindings are referenced in HTML on the element into which the component will be rendered.

Configuration

To use property binding with the WireBootstrap Angular Component, first set up the configuration for the WireBootstrap component on a public property in the page view's component class. For details on a WireBootstrap component's configuration, see the documentation for the component.

The example below shows the public property myConfig defined on the component for the example1.component.html page view.

@Component({
  ...
  templateUrl: './example1.component.html',
}
export class Example1Component  {
  
  // public property containing the component's configuration
  public myConfig: IWireComponentConfig = {    
    ... 
  }    
}

Component Reference

In the page view's HTML template, reference the WireBootstrap Angular Component using its selector. The component's selector is wire-component. Set the value of the component to be the fully qualified object reference to the WireBootstrap component's class or function. Refer to the documentation for the component for this reference.

In the example below, the WireBootstrap Angular Component will render a WireBootstrap Table. The WireBootstrap Table component class is called bsTable and is defined on the root wire object.

<!-- example1.component.html -->
<table wire-component="wire.bsTable" class="table">
</table>

Next, add the configuration defined above by setting the config property on the WireBootstrap Angular Component to the public property myConfig defined early. Using the bracket [] convention tells Angular to pass a reference to the object in the property rather than the text containing the name.

<!-- example1.component.html -->
<table wire-component="wire.bsTable" [config]="config" class="table">
</table>