title: Angular 2+ - Inject HTML content to component in Bootstrap Modal
body: <p>I'm using Angular 5, and ng-bootstrap, to create a modal template as 
  <a href="https://ng-bootstrap.github.io/#/components/modal/examples" rel="nofollow noreferrer">demonstrated here</a></p>
  
  <p>I've decided to create a component as template for the modal and named it <strong>ModalComponent</strong> with the intention of creating it dynamically and passing content to it from the parent component:</p>
  
  <pre><code>constructor(private modalService: NgbModal){}
  
  onOpenModal(){
    this.modalService.open(ModalComponent);
  }
  </code></pre>
  
  <p>I've managed to trigger the modal to open through the parent component, and I understand how to pass variables to the modal component in the same was that is <a href="https://stackoverflow.com/questions/44410418/inject-data-into-component-in-bootstrap-modal-on-angular-4">seen in this question+answer</a>.</p>
  
  <p>However, I wanted to pass some HTML content to the ModalComponent as a variable, and then output it in it's template. Essentially I would like to achieve something similar to how <code>&lt;app-my-component&gt; some html &lt;/app-my-component&gt;</code> injects <code>'some-html'</code>into the child component's <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code>.</p>
  
  <p>I'm sure there is a simple way to do it with dynamically created components, but I am having trouble figuring how to do that, and I understand the DOM manipulation should be done with care and preferably with renderer2.</p>