title: How to read nested directive?
body: <p>I have a custom button component with a structure like this one (simplified version of code for readability purposes):</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary"&gt;
      &lt;ng-content select="[appButtonIcon]"&gt;&lt;/ng-content&gt;
      &lt;i *ngIf="iconClass &amp;&amp; !customIcon" class="fa {{iconClass}}"&gt;&lt;/i&gt;
      {{isIconButton ? '' : text}}
  &lt;/button&gt;
  </code></pre>
  
  <p>TS:</p>
  
  <pre><code>@ContentChild(ButtonIconDirective, { static: true }) customIcon: ButtonIconDirective;
  </code></pre>
  
  <p>And it works fine. Note, please, the line <code>&lt;ng-content select="[appButtonIcon]"&gt;&lt;/ng-content&gt;</code>. I created a custom directive <code>appButtonIcon</code> so the user can add a custom icon, like SVG content, for example. This is working properly, I can do both:</p>
  
  <h3>1</h3>
  
  <pre><code>&lt;custom-button text="Test" (clicked)="onClick()"&gt;
      &lt;svg appButtonIcon ...&gt;
          &lt;path ... /&gt;
      &lt;/svg&gt;
  &lt;/custom-button&gt;
  </code></pre>
  
  <h3>2</h3>
  
  <pre><code>&lt;custom-button text="Test" (clicked)="onClick()" iconClass="fa-folder"&gt;
  &lt;/custom-button&gt;
  </code></pre>
  
  <p>And they work properly. The problem starts when I add this custom button as part of another custom component, my custom datepicker toggle. When I do so, only of the options will work. I can only use a regular icon class or always use a custom icon with the <code>appButtonIcon</code> directive:</p>
  
  <h2>Custom datepicker toggle HTML</h2>
  
  <p>Ideal(?):</p>
  
  <pre><code>&lt;app-custom-button (click)="open($event)" iconClass="fa-calendar" isIconButton="true"&gt;
      &lt;ng-content select="[appButtonIcon]"&gt;&lt;/ng-content&gt;
  &lt;/app-custom-button&gt;
  </code></pre>
  
  <p>But it doesn't work, <code>app-custom-button</code> can never read the content I add inside the custom datepicker toggle with the directive <code>appButtonIcon</code>.</p>
  
  <p>Version only working if custom icons are set:</p>
  
  <pre><code>&lt;app-custom-button (click)="open($event)" iconClass="fa-calendar" isIconButton="true"&gt;
      &lt;ng-container appButtonIcon&gt;
          &lt;ng-content select="[appButtonIcon]"&gt;&lt;/ng-content&gt;
      &lt;/ng-container&gt;
  &lt;/app-custom-button&gt;
  </code></pre>
  
  <p>The problem with this approach is, that, since I had to manually add the <code>ng-container</code> with the <code>appButtonIcon</code> directive, it's always going to be read by the button (obviously), even when there's no content set by the user of the custom datepicker toggle. But if I remove that, the inner content is never read, and the <code>fa-calendar</code> class always used. Is there a way to fix that?</p>
  
  <p>Please take a look at StackBlitz for a "working" example: <a href="https://stackblitz.com/edit/angular-ymxtmv" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ymxtmv</a></p>