title: how can I simplify this app.component.html in angular 2+?
body: <p>I've got a long HTML in my app.component.html that I'd like to make it appear in various conditions, again in the same HTML. </p>
  
  <p>I know this has to do with ng-template and/or ng-container diectives but the articles and official docs I read and tried to understand got me confused even more... They go into too much detail that I cannot wrap my mind around or the examples thy provide does not shed light to my use-case. My use-case is much simpler than those.  </p>
  
  <p>Could someone show me how to simplify this sample structure below using one of those directives? </p>
  
  <p>Say you have a div like this</p>
  
  <pre><code>&lt;div id='commonHTML'&gt;
     long html here, that you do not want to repeat in your app.component.html
  &lt;/div&gt;
  </code></pre>
  
  <p>And you want to display that long HTML, when a condition is true. </p>
  
  <p>but I must say that this wont cut it;</p>
  
  <pre><code>&lt;div *ngIf="myCondition == 'xyz'"&gt;
     &lt;div id='commonHTML'&gt;
        long html here, that you do not want to repeat in your app.component.html
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this won't cut it for me cause I want that commonHTML to show in different sections on my page... For simplicity purposes, say that I want that HTML to show at the HEADER in condition A, and at the LEFT-SIDEBAR in condition B, and in some other conditions, I want that to appear on the at the footer. So you get the idea.. </p>
  
  <p>My question is.. </p>
  
  <p>Do you wrap this  in a ng-Template or an ng-Container div? Or do you throw in #templateReference in that div, and somehow, tell angular to use that reference as an insert? If so, what's the syntax? </p>