Advertisement

#13 The Rest of the Examples

By the time we are done with this article we will have created the example components for the rest of our controls. We will also have registered them and provided access to them through an update to our navigation. The navigation update will also include us make use of the iteration capability of pug to create our anchors in a much more DRY fashion. We will also create a feature module that will make importing our form components into an angular module much easier.

Parts

In the previous article we created an example component for our checkbox control by copying and then adjusting the contents of the template, styling, and component definition files for our basic example. We are staring here as if you have already done the same for each of the other controls. If you have not, located at the end of this article is the code for each of them.

Would be helpful to make a feature module

  • WebUi
    • Source
      • forms
        • forms.module.ts

We are going to start by making it easier to use our form components by creating a feature module (a). This way all of the controls are packaged and ready to go and we do not have to make sure that any consumer also knows to include our radio component in the entry components array.

forms.module.ts (1)

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";

import { XcFormGroupComponent } from "./xc-form-group.component";

import { 
    XcCheckboxComponent, XcInputComponent, XcRadioComponent, 
    XcRadioGroupComponent, XcSelectComponent, XcTextAreaComponent 
} from "./controls/controls.index";

@NgModule({
    declarations: [
        XcCheckboxComponent,
        XcFormGroupComponent,
        XcInputComponent,
        XcRadioComponent,
        XcRadioGroupComponent,
        XcSelectComponent,
        XcTextAreaComponent
    ],
    entryComponents: [
        XcRadioComponent
    ],
    exports: [
        XcCheckboxComponent,
        XcFormGroupComponent,
        XcInputComponent,
        XcRadioComponent,
        XcRadioGroupComponent,
        XcSelectComponent,
        XcTextAreaComponent
    ],
    imports: [ 
        CommonModule,
        ReactiveFormsModule
    ],
    providers: [],
})
export class XcFormsModule {}
(a) Creating a feature module for our form components.

Exporting our examples and updating the examples module

  • WebUi
    • Source
      • forms
        • examples
          • form-examples.index.ts
          • form-examples.module.ts

As I mentioned in the note at the start of this article I am expecting that you have already created the the example components for all of our controls. If you have not take a look at the bottom of this article for the code. Now that they are all made we need to export them from our examples index file (b). And with that done we can head over to our examples module and update it to include all of the example components as well as the forms feature module that we created (c).

form-examples.index.ts (2)

...
export * from "./input/input-example.component";
export * from "./radio/radio-example.component";
export * from "./select/select-example.component";
export * from "./textarea/textarea-example.component";
...
(b) Export the rest of our example components from our examples index.

form-examples.module.ts (2)

if (typeof module.hot !== "undefined") {
    module.hot.accept();
}

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { RouterModule, Routes } from "@angular/router";

import {
    SyntaxHighlightingService
} from "./form-examples.index";

import {
    BasicExampleComponent, CheckboxExampleComponent, InputExampleComponent,
    RadioExampleComponent, SelectExampleComponent, TextareaExampleComponent,
    FormExamplesComponent
} from "./form-examples.index";

const routes: Routes = [
    {
        path: "",
        redirectTo: "basic",
        pathMatch: "full"
    },
    {
        path: "basic",
        component: BasicExampleComponent
    },
    {
        path: "checkbox",
        component: CheckboxExampleComponent
    },
    {
        path: "input",
        component: InputExampleComponent
    },
    {
        path: "radio",
        component: RadioExampleComponent
    },
    {
        path: "select",
        component: SelectExampleComponent
    },
    {
        path: "textarea",
        component: TextareaExampleComponent
    }
];

@NgModule({
    bootstrap: [
        FormExamplesComponent
    ],
    declarations: [
        BasicExampleComponent,
        CheckboxExampleComponent,
        InputExampleComponent,
        RadioExampleComponent,
        SelectExampleComponent,
        TextareaExampleComponent,
        FormExamplesComponent
    ],
    exports: [
        RouterModule
    ],
    imports: [
        BrowserModule,
        RouterModule.forRoot(routes, { useHash: true }),
        XcFormsModule
    ],
    providers: [
        SyntaxHighlightingService
    ]
})
export class FormExamplesModule { }
platformBrowserDynamic().bootstrapModule(FormExamplesModule);
(c) Updating the form examples module so that we can access all of the examples as well as making use of the form feature module that we have created.

Can't see the examples without links

  • WebUi
    • Source
      • forms
        • examples
          • form-examples.component.pug

Next thing to do is update the navigation so that we have links to all of the examples. A straight forward way to do this would be just to list all of the anchors as shown in (d). But since we are programmers we can do better than this. Since we are using pug let's us it to avoid repeating ourselves (e).

form-examples.component.pug (2)

nav.main-nav
    ul
        ...
        li
            a(routerLink="/input", routerLinkActive="active-link") Input
        li
            a(routerLink="/radio", routerLinkActive="active-link") Radio
        li
            a(routerLink="/select", routerLinkActive="active-link") Select
        li
            a(routerLink="/textarea", routerLinkActive="active-link") Textarea
...
(d) The straight forward but less cool and obviously less DRY way to add more anchors to our navigation.

form-examples.component.pug (3)

mixin routerLinks
    ul
        each text in ["Basic", "Checkbox", "Input", "Radio", "Select", "Textarea"]
            - var path = text.toLowerCase();
            a(routerLink=path, routerLinkActive="active-link") #{text}

nav.main-nav
    +routerLinks

div.router-outlet
    router-outlet
(e) A much better way to add the anchors is to make use of the iteration that is available inside of a pug file.
Advertisement

Input

  • WebUi
    • Source
      • forms
        • examples
          • input
            • input-example.component.pug
            • input-example.component.scss
            • input-example.component.ts

input-example.component.pug (1)

include ../examples.mixins.pug

+example
    +controlRow("input")
        xc-input(label="Input", name="input")

input-example.component.scss (1)

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

@include example;

input-example.component.ts (1)

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

import { ExamplesComponent } from "../examples.component";
import { Snippet, SyntaxHighlightingService } from "../../forms.index";

@Component({
    selector: "input-example",
    template: require("./input-example.component.pug"),
    styles: [require("./input-example.component.scss")]
})
export class InputExampleComponent extends ExamplesComponent {
    protected get snippets(): Array<[string, Snippet]> {
        return [
            ["input", { template: 'xc-input(label="Input", name="input")' }]
        ]; 
    }
    protected get tComponent() {
        return `import { Component } from "@angular/core";

import { XcFormGroupComponent } from "../../forms.index";
@Component({
    selector: "input-example",
    template: require("./input-example.component.pug"),
    styles: [require("./input-example.component.scss")]
})
export class InputExampleComponent {
${this.snippetsManager.snippetsToComponent()}
}`;
    }
    protected get tTemplate() {
        return `xc-form-group(name="Form" )
${this.snippetsManager.snippetsToTemplate(1)}`;
    }

    constructor(@Inject(SyntaxHighlightingService) syntaxHighlighter: SyntaxHighlightingService) {
        super(syntaxHighlighter);

        this.addSnippets(this.snippets);
    }
}

Radio

  • WebUi
    • Source
      • forms
        • examples
          • radio
            • radio-example.component.pug
            • radio-example.component.scss
            • radio-example.component.ts

radio-example.component.pug (1)

include ../examples.mixins.pug

+example
    +controlRow("radio")
        xc-radio-group(label="Radio", name="radio", [options]="tOptions")

radio-example.component.scss (1)

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

@include example;

radio-example.component.ts (1)

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

import { ExamplesComponent } from "../examples.component";
import { Snippet, SyntaxHighlightingService } from "../../forms.index";

@Component({
    selector: "radio-example",
    template: require("./radio-example.component.pug"),
    styles: [require("./radio-example.component.scss")]
})
export class RadioExampleComponent extends ExamplesComponent {
    protected get snippets(): Array<[string, Snippet]> {
        return [
        ["radio", {
            component: `private get tOptions() {
    return [
        { label: "label1", value: "value1" },
        { label: "label2", value: "value2" },
        { label: "label3", value: "value3" },
        { label: "label4", value: "value4" }
    ];
}`,
            template: 'xc-radio-group(label="Radio", name="radio", [options]="tOptions" )'
        }]
    ]; 
    }
    protected get tComponent() {
        return `import { Component } from "@angular/core";

import { XcFormGroupComponent } from "../../forms.index";
@Component({
    selector: "radio-example",
    template: require("./radio-example.component.pug"),
    styles: [require("./radio-example.component.scss")]
})
export class RadioExampleComponent {
${this.snippetsManager.snippetsToComponent()}
}`;
    }
    private get tOptions() {
        return [
            { label: "label1", value: "value1" },
            { label: "label2", value: "value2" },
            { label: "label3", value: "value3" },
            { label: "label4", value: "value4" }
        ];
    }
    protected get tTemplate() {
        return `xc-form-group(name="Form" )
${this.snippetsManager.snippetsToTemplate(1)}`;
    }

    constructor(@Inject(SyntaxHighlightingService) syntaxHighlighter: SyntaxHighlightingService) {
        super(syntaxHighlighter);

        this.addSnippets(this.snippets);
    }
}

Select

  • WebUi
    • Source
      • forms
        • examples
          • select
            • select-example.component.pug
            • select-example.component.scss
            • select-example.component.ts

select-examples.component.pug (1)

include ../examples.mixins.pug

+example
    +controlRow("select")
        xc-select(label="Select", name="select", [options]="tOptions")

select-examples.component.scss (1)

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

@include example;

select-examples.component.ts (1)

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

import { ExamplesComponent } from "../examples.component";
import { Snippet, SyntaxHighlightingService } from "../../forms.index";

@Component({
    selector: "select-example",
    template: require("./select-example.component.pug"),
    styles: [require("./select-example.component.scss")]
})
export class SelectExampleComponent extends ExamplesComponent {
    protected get snippets(): Array<[string, Snippet]> {
        return [
        ["select", {
            component: `private get tOptions() {
    return [
        { label: "label1", value: "value1" },
        { label: "label2", value: "value2" },
        { label: "label3", value: "value3" },
        { label: "label4", value: "value4" }
    ];
}`,
            template: 'xc-select(label="Select", name="select", [options]="tOptions")' 
        }]
    ]; 
    }
    protected get tComponent() {
        return `import { Component } from "@angular/core";

import { XcFormGroupComponent } from "../../forms.index";
@Component({
    selector: "select-example",
    template: require("./select-example.component.pug"),
    styles: [require("./select-example.component.scss")]
})
export class SelectExampleComponent {
${this.snippetsManager.snippetsToComponent()}
}`;
    }
    private get tOptions() {
        return [
            { label: "label1", value: "value1" },
            { label: "label2", value: "value2" },
            { label: "label3", value: "value3" },
            { label: "label4", value: "value4" }
        ];
    }
    protected get tTemplate() {
        return `xc-form-group(name="Form" )
${this.snippetsManager.snippetsToTemplate(1)}`;
    }

    constructor(@Inject(SyntaxHighlightingService) syntaxHighlighter: SyntaxHighlightingService) {
        super(syntaxHighlighter);

        this.addSnippets(this.snippets);
    }
}

Textarea

  • WebUi
    • Source
      • forms
        • examples
          • textarea
            • textarea-example.component.pug
            • textarea-example.component.scss
            • textarea-example.component.ts

textarea-example.component.pug (1)

include ../examples.mixins.pug

+example
    +controlRow("textarea")
        xc-textarea(label="Textarea", name="textarea" )

textarea-example.component.scss (1)

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

@include example;

textarea-example.component.ts (1)

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

import { ExamplesComponent } from "../examples.component";
import { Snippet, SyntaxHighlightingService } from "../../forms.index";

@Component({
    selector: "textarea-example",
    template: require("./textarea-example.component.pug"),
    styles: [require("./textarea-example.component.scss")]
})
export class TextareaExampleComponent extends ExamplesComponent {
    protected get snippets(): Array<[string, Snippet]> {
        return [
        ["textarea", { template: 'xc-textarea(label="Textarea", name="textarea" )' }]
    ]; 
    }
    protected get tComponent() {
        return `import { Component } from "@angular/core";

import { XcFormGroupComponent } from "../../forms.index";
@Component({
    selector: "textarea-example",
    template: require("./textarea-example.component.pug"),
    styles: [require("./textarea-example.component.scss")]
})
export class TextareaExampleComponent {
${this.snippetsManager.snippetsToComponent()}
}`;
    }
    
    protected get tTemplate() {
        return `xc-form-group(name="Form" )
${this.snippetsManager.snippetsToTemplate(1)}`;
    }

    constructor(@Inject(SyntaxHighlightingService) syntaxHighlighter: SyntaxHighlightingService) {
        super(syntaxHighlighter);

        this.addSnippets(this.snippets);
    }
}
Exciton Interactive LLC
Advertisement