Typescript & Angular 2 Reflection
<p>Though this topic has already been discussed in other posts like this:</p>

<p><a href="https://stackoverflow.com/questions/15338610/dynamically-loading-a-typescript-class-reflection-for-typescript">Dynamically loading a typescript class (reflection for typescript)</a></p>

<p>I'm not able to find an answer to my specific issue. So, pardon me if this is duplicated.</p>

<p>I'm trying to create a very simple directive in Angular 2 (using Typescript), which allows dynamic addition or removal of a set of controls represented by a Type. For example, if the type is:</p>

<pre><code>class Stone{
  constructor(
  public nameOfStone?: string,
  public typeOfStone?: string
  ){}
}
</code></pre>

<p>the UI would have something like this:</p>

<p><a href="https://i.stack.imgur.com/SZbJs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SZbJs.png" alt="Screenshot 1"></a></p>

<p>I'm able to get this working with a specific Type (ex: Stone). But, given that the directive's objective is just to add this dynamic add/remove feature, I felt that it would make sense to parameterise the type to be created and use this for different type definitions. I tried something like this in the Component class:</p>

<pre><code>import {Component} from 'angular2/core';
import {NgForm}    from 'angular2/common';
import {ControlGroup, Control, FormBuilder, FORM_DIRECTIVES} from    'angular2/common'
@Component({
  selector: 'stone-details',
  templateUrl: '../stones/stone-details.component.html',
  directives: [FORM_DIRECTIVES]
})
export class StoneComponent {
  type = 'Stone';
  Stones = new Array&lt;Stone&gt;();

  addBtnClicked(){
    let Stone = Object.create(window['Stone'].prototype);
    //let Stone = new Stone('', '');
    this.Stones.push(Stone);
  }
  removeBtnClicked(index: number){
    if(index &gt;= this.Stones.length){
      alert('Not a valid index');
    }else if(confirm('Remove this Stone?')){
      this.Stones.splice(index, 1);
    }
  }
}

class Stone{
  constructor(
   public nameOfDeity?: string,
   public typeOfDeity?: string
  ){}
}
</code></pre>

<p>When I use the commented line 
<code>let Stone = new Stone('', '');</code> 
the component works perfectly, but if I use 
<code>let Stone = Object.create(window['Stone'].prototype);</code> 
it doesn't seem to work and the error I see is 
<code>angular2.dev.js:23941 ORIGINAL EXCEPTION: TypeError: Cannot read property 'prototype' of undefined</code>.</p>

<p>I initially thought exporting the Stone class would help, but none of the crazy variations (exporting the class, trying to refer to the class as window['StoneComponent'].export_1['Stone']) helped. I understand the component isn't directly visible under the window component, but I'm not sure what I'm missing. Is there an alternate way to doing this? Am I missing something? Please advise.</p>

<p>P.S: I'm using the latest version of Angular 2 and Typescript (I started this application a couple of days back).</p>