title: form.io: Not rendering custom component
body: <p>I am trying to use <a href="https://form.io/#/" rel="nofollow noreferrer">form.io</a> with a custom component called <code>MeComponent</code> but it is not rendering it. I am not able to figure out what I am missing. This is what I've tried.</p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from "@angular/platform-browser";
  import { NgModule } from "@angular/core";
  import { FormioModule } from "angular-formio";
  
  import { FormSchemaService } from "./services/form-schema.service";
  
  import { AppComponent } from "./app.component";
  import { MeComponent } from "./me/me.component";
  
  @NgModule({
    declarations: [MeComponent, AppComponent],
    imports: [BrowserModule, FormioModule],
    providers: [FormSchemaService],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from "@angular/core";
  import { FormSchemaService } from "./services/form-schema.service";
  import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks";
  @Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
  })
  export class AppComponent implements OnInit {
    public title = "Playing with form.io";
    public data = [];
  
    public formConfig = {
      submission: {
        data: {
          firstName: "Joe",
          lastName: "Smith"
        }
      },
      options: {
        alerts: {
          submitMessage: "Thank you for something."
        },
        errors: {
          message: "Something is not right. Please call 911."
        },
        hooks: {
          beforeSubmit: ($event, callback) =&gt; {
            console.log("form.io --&gt; beforeSubmit: ", $event);
            setTimeout(() =&gt; {
              console.log(callback);
              // Callback with a possibly manipulated submission.
              //  callback("Something wen wrong", null);
              // callback(null, $event);
              callback(
                {
                  message: "Something bad happened.",
                  component: null
                },
                null
              );
            }, 1000);
          }
        }
      }
    };
  
    constructor(private schemaService: FormSchemaService) {}
  
    public ngOnInit() {
      const sub$ = this.schemaService.getFormSchema().subscribe(data =&gt; {
        this.data = data;
        sub$.unsubscribe();
      });
    }
  
    public onSubmit($event) {
      console.log($event);
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h2&gt;{{title}}&lt;/h2&gt;
  &lt;hr&gt;
  &lt;formio [form]="data" (submit)="onSubmit($event)" [submission]="formConfig.submission" [options]="formConfig.options"&gt;&lt;/formio&gt;
  </code></pre>
  
  <p>Here's the service which provides data:</p>
  
  <p><strong>form-schema.service.ts</strong></p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { Observable } from "rxjs/Observable";
  
  import "rxjs/add/operator/delay";
  import "rxjs/add/observable/of";
  
  const data = {
    title: "My Test Form",
    components: [
      {
        type: "textfield",
        input: true,
        tableView: true,
        inputType: "text",
        inputMask: "",
        label: "First Name",
        key: "firstName",
        placeholder: "Enter your first name",
        prefix: "",
        suffix: "",
        multiple: false,
        customClass: "text-loud",
        protected: false,
        unique: false,
        persistent: true,
        validate: {
          required: true,
          minLength: 2,
          maxLength: 10,
          pattern: "",
          custom: "",
          customPrivate: false
        },
        conditional: {
          show: "",
          when: null,
          eq: ""
        }
      },
      {
        type: "textfield",
        input: true,
        tableView: true,
        inputType: "text",
        inputMask: "",
        label: "Last Name",
        key: "lastName",
        placeholder: "Enter your last name",
        prefix: "",
        suffix: "",
        multiple: false,
        protected: false,
        unique: false,
        persistent: true,
        validate: {
          required: true,
          minLength: 2,
          maxLength: 10,
          pattern: "",
          custom: "",
          customPrivate: false
        },
        conditional: {
          show: "",
          when: null,
          eq: ""
        }
      },
      {
        input: true,
        tableView: true,
        label: "Country",
        key: "country",
        placeholder: "Select a country",
        data: {
          json: [
            {
              name: "Afghanistan",
              code: "AF",
              $$hashKey: "object:1299"
            },
            {
              name: "Åland Islands",
              code: "AX",
              $$hashKey: "object:1300"
            },
            {
              name: "Albania",
              code: "AL",
              $$hashKey: "object:1301"
            },
            {
              name: "Algeria",
              code: "DZ",
              $$hashKey: "object:1302"
            },
            {
              name: "American Samoa",
              code: "AS",
              $$hashKey: "object:1303"
            },
            {
              name: "AndorrA",
              code: "AD",
              $$hashKey: "object:1304"
            },
            {
              name: "Angola",
              code: "AO"
            },
            {
              name: "Anguilla",
              code: "AI"
            },
            {
              name: "Antarctica",
              code: "AQ"
            },
            {
              name: "Antigua and Barbuda",
              code: "AG"
            },
            {
              name: "Argentina",
              code: "AR"
            },
            {
              name: "Armenia",
              code: "AM"
            },
            {
              name: "Aruba",
              code: "AW"
            },
            {
              name: "Australia",
              code: "AU"
            },
            {
              name: "Austria",
              code: "AT",
            },
            {
              name: "Azerbaijan",
              code: "AZ"
            },
            {
              name: "Bahamas",
              code: "BS",
            },
            {
              name: "Somalia",
              code: "SO"
            },
            {
              name: "South Africa",
              code: "ZA"
            },
            {
              name: "South Georgia and the South Sandwich Islands",
              code: "GS"
            },
            {
              name: "Spain",
              code: "ES"
            },
            {
              name: "Sri Lanka",
              code: "LK"
            },
            {
              name: "Sudan",
              code: "SD"
            },
            {
              name: "Suriname",
              code: "SR"
            },
            {
              name: "Svalbard and Jan Mayen",
              code: "SJ"
            },
            {
              name: "Swaziland",
              code: "SZ"
            },
            {
              name: "Sweden",
              code: "SE"
            },
            {
              name: "Switzerland",
              code: "CH"
            },
            {
              name: "Syrian Arab Republic",
              code: "SY"
            },
            {
              name: "Taiwan, Province of China",
              code: "TW"
            },
            {
              name: "Tajikistan",
              code: "TJ"
            },
            {
              name: "Tanzania, United Republic of",
              code: "TZ"
            },
            {
              name: "Thailand",
              code: "TH"
            },
            {
              name: "Timor-Leste",
              code: "TL"
            },
            {
              name: "Togo",
              code: "TG"
            },
            {
              name: "Tokelau",
              code: "TK"
            },
            {
              name: "Tonga",
              code: "TO"
            },
            {
              name: "Trinidad and Tobago",
              code: "TT"
            },
            {
              name: "Tunisia",
              code: "TN"
            },
            {
              name: "Turkey",
              code: "TR"
            },
            {
              name: "Turkmenistan",
              code: "TM"
            },
            {
              name: "Turks and Caicos Islands",
              code: "TC"
            },
            {
              name: "Tuvalu",
              code: "TV"
            },
            {
              name: "Uganda",
              code: "UG"
            },
            {
              name: "Ukraine",
              code: "UA"
            },
            {
              name: "United Arab Emirates",
              code: "AE"
            },
            {
              name: "United Kingdom",
              code: "GB"
            },
            {
              name: "United States",
              code: "US"
            },
            {
              name: "United States Minor Outlying Islands",
              code: "UM"
            },
            {
              name: "Uruguay",
              code: "UY"
            },
            {
              name: "Uzbekistan",
              code: "UZ"
            },
            {
              name: "Vanuatu",
              code: "VU"
            },
            {
              name: "Venezuela",
              code: "VE"
            },
            {
              name: "Viet Nam",
              code: "VN"
            },
            {
              name: "Virgin Islands, British",
              code: "VG"
            },
            {
              name: "Virgin Islands, U.S.",
              code: "VI"
            },
            {
              name: "Wallis and Futuna",
              code: "WF"
            },
            {
              name: "Western Sahara",
              code: "EH"
            },
            {
              name: "Yemen",
              code: "YE"
            },
            {
              name: "Zambia",
              code: "ZM"
            },
            {
              name: "Zimbabwe",
              code: "ZW"
            }
          ],
          url: "",
          resource: "",
          custom: "",
          headers: [
            {
              value: "",
              key: ""
            }
          ]
        },
        dataSrc: "json",
        valueProperty: "code",
        defaultValue: "",
        refreshOn: "",
        filter: "none",
        authenticate: false,
        template: "&lt;span&gt;{{ item.name }}&lt;/span&gt;",
        multiple: false,
        protected: false,
        unique: false,
        persistent: true,
        hidden: false,
        clearOnHide: true,
        validate: {
          required: true
        },
        type: "select",
        $$hashKey: "object:565",
        hideLabel: false,
        labelPosition: "top",
        tags: [],
        conditional: {
          show: "",
          when: null,
          eq: ""
        },
        lockKey: true,
        limit: ""
      },
      {
        input: true,
        label: "Submit",
        tableView: false,
        key: "submit",
        size: "lg",
        leftIcon: "",
        rightIcon: "",
        block: true,
        action: "submit",
        disableOnInvalid: true,
        theme: "primary",
        type: "button"
      },
      {
        type: "me", // MeComponent
        tableView: true,
        persistent: true,
        unique: false,
        protected: false,
        defaultValue: "",
        input: true
      }
    ]
  };
  
  @Injectable()
  export class FormSchemaService {
    constructor() {}
  
    public getFormSchema(): Observable&lt;any&gt; {
      return Observable.of(data).delay(1000);
    }
  }
  </code></pre>
  
  <p><strong>me.component.ts</strong></p>
  
  <pre><code>import { Formio } from "formiojs/full";
  import { Component, OnInit } from "@angular/core";
  import {
    FormioResourceService,
    FormioResourceViewComponent,
    FormioResourceConfig
  } from "angular-formio/resource";
  import { FormioAppConfig } from "angular-formio";
  
  @Component({
    template: `
    &lt;p&gt;Me Component&lt;/p&gt;
    `
  })
  export class MeComponent extends FormioResourceViewComponent implements OnInit {
    constructor(
      public service: FormioResourceService,
      public config: FormioResourceConfig
    ) {
      super(service, config);
      console.log(service, config);
    }
  
    ngOnInit() {
      console.log("MeComponent --&gt; ", this.service.resource);
    }
  }
  
  Formio.registerComponent("me", MeComponent);
  </code></pre>
  
  <p>Can anyone please help me on this? Thanks.</p>