title: How to share HTML between components?
body: <p>I want to share some HTML (layout) between some of my components but not all.</p>
  
  <p><strong>app.compomonent.html:</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="classA"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Some of my components, but not all, share some HTML:</p>
  
  <p><strong>Component X</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="classB"&gt;
    &lt;h2&gt;{{Subtitle}}&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="classC"&gt;
    X_SPECIFIC_HTML
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Component Y</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="classB"&gt;
    &lt;h2&gt;{{Subtitle}}&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="classC"&gt;
    Y_SPECIFIC_HTML
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to define the shared HTML (note the data binding) with a placeholder for the actual component HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="classB"&gt;
    &lt;h2&gt;{{Subtitle}}&lt;/h2&gt;
  &lt;/div&gt;
  &lt;div class="classC"&gt;
    INSERT_COMPONENT_HTML_HERE
  &lt;/div&gt;
  </code></pre>
  
  <p>So my components can be defined like this:</p>
  
  <p><strong>Component X</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>X_SPECIFIC_HTML
  </code></pre>
  
  <p><strong>Component Y</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>Y_SPECIFIC_HTML
  </code></pre>
  
  <p>Current routes:</p>
  
  <pre class="lang-js prettyprint-override"><code>const appRoutes: Routes = [
    { path: 'x', component: XComponent },
    { path: 'y', component: YComponent }
  ];
  </code></pre>
  
  <p>Is this possible?</p>