title: Angular / TS - Get Type<SomeClass> from string
body: <p>I have a component which is used many times to display different data. To know which data to display the component gets a string as an <code>@Input()</code> (I'd rather directly get a <code>Type&lt;SomeClass&gt;</code> but that doesn't seem possible). I then use that string to know which class to instantiate to get the correct data. However I can't find any way to get a <code>Type&lt;SomeClass&gt;</code> from that string.</p>
  <p>Html file displaying card components :</p>
  <pre class="lang-html prettyprint-override"><code>&lt;app-card cardData=&quot;SomeClassName&quot;&gt;&lt;/app-card&gt;
  &lt;!-- Here I wish I could just give the class type --&gt;
  &lt;app-card cardData=&quot;SomeOtherClassName&quot;&gt;&lt;/app-card&gt;
  ...
  </code></pre>
  <p>Service managing the creation of the required class :</p>
  <pre class="lang-js prettyprint-override"><code>@Injectable({
    providedIn: 'root'
  })
  export class SomeService {
  
    constructor(private someOtherService: SomeOtherService) {
    }
  
    getDataFromType(dataClass: Type&lt;SomeAbstractClass&gt;, input: any): SomeAbstractClass {
      return new dataClass(this.someOtherService, input);
    }
  
  }
  </code></pre>
  <p>Card component's files :</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-card',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.scss']
  })
  export class CardComponent implements OnInit, ISimulable {
  
    @Input() cardData: string | undefined = undefined;
    
    rowsData: SomeAbstractClass;
  
    constructor(private someService: SomeService) {
      rowsData = someService.getDataFromType(/* cardData as Type&lt;SomeAbstractClass&gt; */);
    }
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor=&quot;let data of rowsData&quot;&gt;
    &lt;div&gt;
      {{ data.label }}
    &lt;/div&gt;
    &lt;div&gt;
      {{ data.value }}
    &lt;/div&gt;
    &lt;div&gt;
      &lt;em&gt;{{ data.metric }}&lt;/em&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>