Advertisement

#8 Now Presenting the Checkbox

This article will be short one, since we have done a lot of the work in the last article, to create and add a checkbox control to our basic example.

Parts

Let's create a checkbox control

  • WebUi
    • Source
      • forms
        • controls.mixins.pug

We are going to start by adding a template mixin for our checkbox to our controls mixin pug file (a).

controls.mixins.pug (1)

...
mixin checkbox
    input(type="checkbox", [formControlName]="tName" )
...
(a) Template for our checkbox control.
  • WebUi
    • Source
      • forms
        • controls
          • checkbox
            • xc-checkbox.component.pug
            • xc-checkbox.component.scss
            • xc-checkbox.component.ts

Next we need to create our template file which will invoke the mixin that we just created (b), a style file (c), and finally the component definition itself (d).

xc-checkbox.component.pug (1)

include ../controls.mixins.pug

+formControlGroup
    +checkbox
(b) Creating the template for our checkbox.

xc-checkbox.component.scss (1)

@import "../controls.mixins.scss";

@include formControlGroup;
(c) Creating the styles for our checkbox.

xc-checkbox.component.ts (1)

import { forwardRef, Component } from "@angular/core";

import { XcFormControl } from "../xc-form-control";

@Component({
    selector: "xc-checkbox",
    template: require("./xc-checkbox.component.pug"),
    styles: [require("./xc-checkbox.component.scss")],
    providers: [{ provide: XcFormControl, useExisting: forwardRef(() => XcCheckboxComponent) }]
})
export class XcCheckboxComponent extends XcFormControl<boolean> {
    protected get tagName() { return "xc-checkbox"; }
}
(d) Creating the component definition for our checkbox.
Advertisement
  • WebUi
    • Source
      • forms
        • examples
          • form-examples.module.ts
        • controls.index.ts

Now that we have created our checkbox component we need to export it from our controls index file (e). With that done it's a simple matter to register the control with our examples module (f).

controls.index.ts (1)

export * from "./checkbox/xc-checkbox.component";
...
(e) Export the checkbox control that we just created from our controls index.

form-examples.module.ts (1)

...
import {
    ..., XcCheckboxComponent, ...
} from "./form-examples.index";
...
@NgModule({
    ...,
    declarations: [
        ...,
        XcCheckboxComponent,
        ...
    ],
    ...
})
export class FormExamplesModule { }
platformBrowserDynamic().bootstrapModule(FormExamplesModule);
(f) Registering our checkbox with the examples module.

Time to add the checkbox to our basic example

  • WebUi
    • Source
      • forms
        • examples
          • basic
            • basic-example.component.pug
            • basic-example.component.ts

To add a checkbox to our basic example it is a simple matter to modify the template (g) and of course add a snippet to our example component (h).

basic-example.component.pug (1)

...
div.example-container
    div.example-content
        ...
        div.controls-template-component
            xc-form-group(... )
                +controlRow("checkbox")
                    xc-checkbox(label="Checkbox", name="checkbox" )
                ...
(g) Time to add a new row to our example containing a checkbox.

basic-example.component.ts (1)

...
export class BasicExampleComponent implements ... {
    ...
    private readonly _snippets = new SnippetsManager([
        ["checkbox", { template: 'xc-checkbox(label="Checkbox", name="checkbox" )' }],
        ...
    ]);
    ...
}
(h) Don't forget to add a snippet to our snippet manager for the checkbox.
Exciton Interactive LLC
Advertisement