title: Dynamic template based on value rather than variable with ngTemplateOutlet
body: <p>I'm trying to mock up a dynamic set of questions.  Think of a quiz, where one question is multiple choice, the second is single answer, the third is yes no..etc.</p>
  
  <p>Using angular 4.1, I thought that templating with ngTemplateOutlet would be the best way to go for this, the idea being that I can style all the checkboxes to be the same, and all the radiobuttons the same etc.</p>
  
  <pre><code>@Component({
    selector: 'my-component',
    template: `
      &lt;div *ngFor="let item of items"&gt;
          &lt;ng-template [ngTemplateOutlet]="item.type" [ngOutletContext]="{ item: item }"&gt;&lt;/ng-template&gt;
      &lt;/div&gt;`
  })
  export class MyComponent {
    @Input() items: any[];
  }
  
  @Component({
    selector: 'my-app',
    template: `
      &lt;div&gt;
        &lt;my-component [items]="questions"&gt;
          &lt;ng-template #question let-item="item"&gt;{{item?.question}}&lt;/ng-template&gt;
          &lt;ng-template #check let-item="item"&gt;checkboxes here {{item?.type}} - {{item?.values}}&lt;/ng-template&gt;
          &lt;ng-template #radio let-item="item"&gt;radio buttons here{{item?.type}} - {{item?.values}}&lt;/ng-template&gt;
          &lt;ng-template #bool let-item="item"&gt;boolean here{{item?.type}} - {{item?.values}}&lt;/ng-template&gt;
          &lt;ng-template #textbox let-item="item"&gt;textbox here{{item?.type}} - {{item?.values}}&lt;/ng-template&gt;
        &lt;/my-component&gt;
      &lt;/div&gt;`
  })
  export class App {
    @ViewChild('question') question;
    @ViewChild('type') type;
    @ViewChild('values') values;
    questions = [
        { question: "my checkbox question", type: "check", values: ["checkbox1","checkbox2","checkbox3","checkbox4"] },
        { question: "my radiobutton question", type: "radio", values: ["radio1","radio2","radio3","radio4"] } ,
        { question: "my boolean question", type: "bool", values: ["yes", "no"] } ,
        { question: "my textbox question", type: "textbox", values: ["maybe something maybe nothing"] } 
      ];
  </code></pre>
  
  <p>I've <a href="https://plnkr.co/edit/1su5luqnY3OMfMyXRLhZ?p=preview" rel="noreferrer">created this plunker as a proof of concept</a> effort, but it is not working.  All the code is in the <code>src/app.ts</code> file.</p>
  
  <p>What I want is something like this:</p>
  
  <pre><code>My checkbox question?
  checkbox 1, checkbox2, checkbox3
  
  my radio button question
  radiobutton1, radiobutton2, radiobutton3
  
  my boolean question?
  yes, no 
  </code></pre>
  
  <p>How can I modify this code to use the value of variable to indicate which template to use?  </p>