Angular 7 Dynamic variable name for imported component

Question

In a simple angular app, I have created a test component like the one below:

test.component.ts

    import { Component } from '@angular/core';

    @Component({
      selector: 'test',
      template: `<h1>I am a test</h1>`,
      styles: [`h1 { font-family: Lato; }`]
    })
    export class TestComponent  {

    }

which I import in my app module like this:

app.component.ts

    import { Component } from '@angular/core';
    import { TestComponent } from './test.component';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      name = 'Angular';
      public TestComponent = TestComponent;
      dynamic = "Test";

      constructor(){
        console.log(TestComponent);
        console.log(this.TestComponent);
        console.log(this['TestComponent']);
        console.log(this[this.dynamic + 'Component']);
      }
    }

Getting help from this topic Angular 5 Dynamic variable name, I was able to get my component name dynamically (in the real example, the dynamic variable changes depending on an API call response).

My question is if there is any way to achieve the same result without having to pass the component as a local class variable, thus avoiding this line

public TestComponent = TestComponent;

without the this keyword the dynamic variable is not working, it gives me an error

console.log([this.dynamic + 'Component']);

I tried adding the code in a stackblitz but cannot seem to be able to share it (https://github.com/stackblitz/core/issues/215), but it is quite simple to copy the two files in a new empty stackbitz (https://stackblitz.com/edit/angular-f4ars5) to replicate.

Thanks in advance.

Answer 1

First you need to understand the following line

this['TestComponent']

In javascript you can access class properties in two ways. Class.property or Class["property"]. So when you are writing this["TestProperty"] you are effectively saying, Get AppComponentInstance.TestProperty

So console.log([this.dynamic + 'Component']); is like writing .TextComponent with nothing on the left side.

Now based on this, what are you trying to achieve exactly? Get the type or an instance of the type? What do you want to use the type for?

What you could do though would be to declare somewhere another global class and have these properties in them. Check this one for global variable declaration.

Your json could be something like this:

export class ComponentMapping
{
    private TestComponent = TestComponent;
}

And then in your class access the test component accordingly.