title: Angular 5 - Bind a component selector with InnerHtml
body: <p>I have a component1 selector that I called "app-component1".</p>
  
  <pre><code>@Component({
     selector: 'app-component1',
     templateUrl: './test-widget.component.html',
     styleUrls: ['./test-widget.component.scss'] })
  </code></pre>
  
  <p>So to call the html of this component I usually use:</p>
  
  <pre><code>&lt;app-component1&gt;&lt;/app-component1&gt;
  </code></pre>
  
  <p>and it works perfectly fine.</p>
  
  <p>Now from another component2 I have the following variable:</p>
  
  <pre><code>variableToBind = "&lt;app-component1&gt;&lt;/app-component1&gt;";
  </code></pre>
  
  <p>And In the html of component 2 I used the following: </p>
  
  <pre><code>&lt;div [innerHtml]="varibableToBind"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The html code binding isn't working. Is is possible to help me understand why and maybe help me find another alternative?</p>