With the provider registered, you're ready to render controls.

Import from subpaths

The root @awdlab/jig entry point is intentionally empty — every control has its own subpath, so you only bundle what you import:

import { JigButton } from '@awdlab/jig/button';
import { JigSelect } from '@awdlab/jig/select';
import { provideJigControls } from '@awdlab/jig/api/ng';

Render a control

Controls are standalone — add them to a component's imports and use them in the template. Some are elements (jig-select), some are attribute directives on native elements (button[jigButton], input[jigInput]):

import { Component } from '@angular/core';
import { JigButton } from '@awdlab/jig/button';

@Component({
  selector: 'app-example',
  imports: [JigButton],
  template: `<button jigButton kind="primary">Save</button>`,
})
export class ExampleComponent {}

Every control's look is decided by its kind and color — see Kinds & Colors.

Binding values

Value controls expose their value as a signal model(), so two-way binding works without ControlValueAccessor:

@Component({
  imports: [JigInput, JigInputField],
  template: `
    <jig-input-field>
      <input jigInput [value]="name()" (valueChange)="name.set($event ?? '')" />
    </jig-input-field>
  `,
})
export class NameField {
  protected readonly name = signal('');
}

Controls implement Angular's signal-forms FormValueControl contract, so the same markup binds to signal forms, reactive forms and ngModel alike — no ControlValueAccessor anywhere. Validation messages are surfaced through the dedicated error/hint controls; see Forms & Validation.

Next steps

• Components — browse the full catalog.
• Configuration — every provider option in one place.
• Forms & Validation — binding values and showing errors.
• Passthrough — customize a control's internals.
• Icons — the icon system.