AngularAttack hackaton hack of the day: "mux" - component that builds components see https://formsy.2016.angularattack.io/#/basic

basic-form-mux.ts

import {Component, Input, ViewChild, ViewContainerRef, ComponentResolver, OnInit} from '@angular/core';
import {FORM_DIRECTIVES, FormBuilder} from '@angular/common';
import {FORMSY_BS_DIRECTIVES} from 'ng2-formsy';
import {BasicForm} from './basic.form';

@Component({
  selector: 'basic-form-mux',
  template: '<template #muxContent></template>',
})
export class BasicFormMux implements OnInit {
  @Input('template') template: string;
  @ViewChild('muxContent', {read: ViewContainerRef}) contentTarget: ViewContainerRef;
  constructor(private componentResolver: ComponentResolver) {}

  ngOnInit() {
    this.componentResolver.resolveComponent(this.createContentComponent(this.template))
      .then((factory: any) => this.contentTarget.createComponent(factory));
  }

  createContentComponent(template: string): any {
    @Component({
      template: template,
      directives: [
        FORMSY_BS_DIRECTIVES,
        FORM_DIRECTIVES
      ]
    })
    class MuxContent extends BasicForm {
      constructor(formBuilder: FormBuilder) {
        super(formBuilder);
      }
    }
    return MuxContent;
  }
}

basic.form.ts

import {Component} from '@angular/core';
import {Validators, ControlGroup, FORM_DIRECTIVES, FormBuilder} from '@angular/common';
import {FORMSY_BS_DIRECTIVES} from 'ng2-formsy';

@Component({
  selector: 'basic-form',
  template: '<!-- template -->',
  directives: [
    FORMSY_BS_DIRECTIVES,
    FORM_DIRECTIVES
  ]
})
export class BasicForm {
  form: ControlGroup;

  constructor(formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      name: ['', Validators.compose([
        Validators.required,
        Validators.minLength(2),
        Validators.pattern('[A-Za-z]+')
      ])]
    });
  }

  onSubmit() {
    // submit
  }
}

basic.page.html

<div *ngFor="let template of templates">
  <div class="row">
    <div class="col-xs-12">
      <h2> {{ template.title }}</h2>
    </div>
    <div class="col-xs-12 col-md-8">
      <pre class="prettyprint">{{ template.markup }}</pre>
      <h2>Preview</h2>
      <basic-form-mux [template]="template.markup"></basic-form-mux>
    </div>
  </div>
</div>

basic.page.ts

import {Component} from '@angular/core';
import {BasicFormMux} from './basic.form.mux';

@Component({
  selector: 'basic-page',
  template: require('./basic.page.html'),
  directives: [
    BasicFormMux
  ]
})

export class BasicPage {
  codeTs: string = require('!!raw!./basic.form.ts');
  templates = [
    {markup: require('./markup.html'), title: 'Markup'},
    {markup: require('./markup-custom.html'), title: 'Markup custom'},
    {markup: require('./horizontal-label.html'), title: 'Horizontal label'},
    {markup: require('./horizontal-label-custom.html'), title: 'Horizontal label custom'}
  ];
}