Hand in templates to an ng-content in an Angular 4 application.

Let's change up the end of the second file here like so:

   <tr>
      <td nowrap>St. Louis</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <ng-container *ngTemplateOutlet="reskin2"></ng-container>
            <ng-container *ngTemplateOutlet="reskin3" secondaryStuff></ng-container>
         </numeric>
      </td>
      <td>
         <numeric>
            <ng-container *ngTemplateOutlet="reskin1">
            </ng-container>
         </numeric>
      </td>
   </tr>
</table>
<ng-template #reskin1>
   <span>F:</span>
   <span secondaryStuff>C:</span>
</ng-template>
<ng-template #reskin2>
   <span>F:</span>
</ng-template>
<ng-template #reskin3>
   <span>C:</span>
</ng-template>

 
 

The last of the cells will be messed up. The secondaryStuff distinction cannot be made outside of a selector tag. In the second to last cell we see the workaround for this heartache.