1

I have a banner that is loaded via an API call in my application that I don't have direct access to the template for. Due to the nature of the application I need to inject some code into it after it has been appended to the DOM. I'd like to do something like this once it has been loaded to place my own component among the banner:

const customLogoElem = document.getElementsByClassName('custom-logo').item(0);
customLogoElem.innerHTML = `<my-component></my-component>`;

The Angular element renders in the DOM but it doesn't include the template from <my-component />, it's instead just blank. Is there some way I can do this?

James Ives
  • 3,177
  • 3
  • 30
  • 63
  • Inserting the tag for an Angular component into the DOM does not automatically instantiate the component. You will need to manually create the component using something like [`ViewContainerRef.createComponent()`](https://angular.io/api/core/ViewContainerRef#createcomponent). – D M Feb 11 '21 at 15:06
  • 1
    Does this answer your question? [How to dynamically add innerHTML with angular 2 components](https://stackoverflow.com/questions/40473910/how-to-dynamically-add-innerhtml-with-angular-2-components) – D M Feb 11 '21 at 15:08
  • Sorta? I understand the concept of using createComponent to insert a component dynamically, but it requires something for ViewChild to reference. I can't simply set `customLogoElem.innerHTML = '
    '` and run `createComponent` as I run into the same issue I was in before, it will undefined to Angular.     – James Ives Feb 11 '21 at 16:20

0 Answers0