title: Angular 7 dynamically load @Component
body: <p>I'm trying to dynamically add components to my @Component template the components are populating but the tool bar does not change when I change the "buttonstring" variable.</p>
  
  <p>I have a component..</p>
  
  <pre><code>@Component({
  selector: 'map-toolbar-action',
  template:'&lt;p style="position: absolute;z- 
  index:5000"&gt;' + mapValues.buttonString + 
  '&lt;/p&gt;',
  styleUrls: ['./map-toolbar- 
  action.component.scss']
  })
  export class MapToolbarActionComponent 
  implements OnInit {
  
  constructor() {
  mapValues.buttonString = 
  mapValues.arrayToString(mapValues.buttons);
  }
  
  ngOnInit() {
  }
  
  }
  </code></pre>
  
  <p>I have a singleton with these elements...</p>
  
  <pre><code>public static buttonString = "&lt;component1&gt;&lt;/component1&gt;&lt;component2&gt;&lt;/component2&gt;&lt;component3&gt;&lt;/component3&gt;";
  </code></pre>
  
  <p>I was hoping that I could then change buttonString to add, subtract or completely replace the list of components and the toolbar would update.</p>
  
  <pre><code>buttonString = "&lt;component2&gt;&lt;/component2&gt;&lt;component3&gt;&lt;/component3&gt;";
  buttonString = "&lt;component1&gt;&lt;/component1&gt;&lt;component2&gt;&lt;/component2&gt;&lt;component3&gt;&lt;/component3&gt;&lt;component4&gt;&lt;/component4&gt;";
  buttonString = "&lt;componentA&gt;&lt;/componentA&gt;&lt;componentB&gt;&lt;/componentB&gt;&lt;componentC&gt;&lt;/componentC&gt;;
  </code></pre>
  
  <p>and that would in-turn update the components to the template but it's not working like that...how can I accomplish this?</p>
  
  <p>Any help is greatly appreciated!!</p>