title: Call function from generic component Angular
body: <p>I am using Angular 9 and I have a data strcture as follow:<br>
  <code>myMap: Map&lt;key: string, value: {component: any, data: string}&gt;</code></p>
  
  <p>I have 3 elements in my map, the first attribute of my value object is a Component type. I use it to create dynamically new components Like:  </p>
  
  <pre><code>const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.myMap.get(compName).component);
  this.container.clear();
  const comp = this.container.createComponent(componentFactory);
  </code></pre>
  
  <p>Now I want to call the function of the created component. All the components have one function in common (for example <code>foo(string)</code>) but implemented differently in each component. How can I call this function.
  I tried to do:<br>
  <code>(&lt;this.myMap.get(compName).component&gt;comp.instance).foo('abcd');</code><br>
  However I have a compilation error.</p>
  
  <p>An example of my map object:  </p>
  
  <pre><code>myMap: Map&lt;key: string, value: {component: any, data: string}&gt; = [
      ['compA', {comp: AComponent, data: 'A'}],
      ['compB', {comp: BComponent, data: 'B'}],
      ['compC', {comp: CComponent, data: 'C'}]
  ]
  </code></pre>
  
  <p>The way I thought of doing it was with 3 if else statements like:</p>
  
  <pre><code>if (compName === 'compA') {
      (&lt;compA&gt;comp.instance).foo('abcd');
  } else if (compName === 'compB') {
      (&lt;compB&gt;comp.instance).foo('abcd');
  } else if (compName === 'compC') {
      (&lt;compC&gt;comp.instance).foo('abcd');
  }
  </code></pre>
  
  <p>But that's really not beautiful, is there another way to do this?</p>