How to share HTML between components?

I want to share some HTML (layout) between some of my components but not all.

app.compomonent.html:

<div class="classA">
  <router-outlet></router-outlet>
</div>

Some of my components, but not all, share some HTML:

Component X

<div class="classB">
  <h2>{{Subtitle}}</h2>
</div>
<div class="classC">
  X_SPECIFIC_HTML
</div>

Component Y

<div class="classB">
  <h2>{{Subtitle}}</h2>
</div>
<div class="classC">
  Y_SPECIFIC_HTML
</div>

I want to define the shared HTML (note the data binding) with a placeholder for the actual component HTML:

<div class="classB">
  <h2>{{Subtitle}}</h2>
</div>
<div class="classC">
  INSERT_COMPONENT_HTML_HERE
</div>

So my components can be defined like this:

Component X

X_SPECIFIC_HTML

Component Y

Y_SPECIFIC_HTML

Current routes:

const appRoutes: Routes = [
  { path: 'x', component: XComponent },
  { path: 'y', component: YComponent }
];

Is this possible?