Make a not nude default ng-content in an Angular 4 component.

The example that follows is kinda silly. Per this you have to do something like this:

<span #ref><ng-content></ng-content></span>
<span *ngIf="ref.childNodes.length == 0"><label>Fahrenheit:</label></span>
<input type="number" #fahrenheit value="32" (keyup)="changeCelsius()">
<ng-content select="[secondaryStuff]"></ng-content>
<span *ngIf="ref.childNodes.length == 0"><label>Celsius:</label></span>
<input type="number" #celsius value="0" (keyup)="changeFahrenheit()">
<ng-content select="[auxiliaryStuff]"></ng-content>
<span *ngIf="ref.childNodes.length == 0">
   <a href="javascript:void(0)" (click)="getHelp()">(help)</a>
</span>

 
 

I overpower it from the outside like so:

<table>
   <tr>
      <td></td>
      <td>Dawn</td>
      <td>Noon</td>
      <td>Dusk</td>
   </tr>
   <tr>
      <td nowrap>Kansas City</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
   <tr>
      <td nowrap>Columbia</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
   <tr>
      <td nowrap>St. Louis</td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
      <td>
         <numeric>
            <span>F:</span>
            <span secondaryStuff>C:</span>
         </numeric>
      </td>
   </tr>
</table>