title: How to use context in *ngTemplateOutlet with custom Directive in Angular with Material Tables
body: <p>Used Framework: Angular 8 with Material Design</p>
  
  <p>I have made a table-template for reusing my structures in different components, so I don´t have to rebuild it again. 
  The table can be used and modified on every component and on desktop view it looks as I expected. 
  Now I added a mobile-Header-Row which should look different and I hoped using *ngTemplateOutlet with a "isMobile"-Property in the Context could solve my problem. 
  But in the component I only receive the data, not the context!?</p>
  
  <p>Does anyone have an idea to solve this?</p>
  
  <p>Used ng-template in my component, where I use my table-component, but it shows nothing. Using ng-container shows me the provided Data.</p>
  
  <p>Part of my template-table: </p>
  
  <pre><code>&lt;ng-container matColumnDef="{{ headerValue.field }}-filter" *ngFor="let headerValue of headerValues"&gt;
  &lt;ng-container *ngIf="headerValue.isSearchable"&gt;
      &lt;th mat-header-cell *matHeaderCellDef [class.hidden-below-lg]="headerValue.isMobileHeaderRow"&gt;
          &lt;trp-input-field
              formControlName="{{ headerValue.field }}"
              placeholder="{{ 'SEARCH' | translate }}"
              class="dark"
          &gt;&lt;/trp-input-field&gt;
      &lt;/th&gt;
      &lt;td
          mat-cell
          *matCellDef="let element"
          [class.hidden-below-lg]="headerValue.isMobileHeaderRow"
          [innerHTML]="
              (element[headerValue.field] ? element[headerValue.field].toString() : '') | translate
          "
      &gt;&lt;/td&gt;
  &lt;/ng-container&gt;
  &lt;ng-container *ngIf="!headerValue.isSearchable"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;&lt;/th&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p></p>
  
  <p>in my Component: </p>
  
  <pre><code>    &lt;app-table-header
      [isSearchable]="true"
      name="{{ 'TARGET_AGREEMENT.STORES.FIELDS.NAME' | translate }}"
      field="name"
      [isMobileHeaderRow]="true"
      width="260px"
  &gt;
      &lt;ng-container *appColumnFormat="let targetAgreement"&gt;
          {{ targetAgreement.name }} -
          {{ targetAgreement.rmsId }}
      &lt;/ng-container&gt;
  
  &lt;/app-table-header&gt;
  </code></pre>
  
  <p>my  appColumnFormat-Directive used in my table-header-Directive</p>
  
  <pre><code>@Directive({
  selector: '[appColumnFormat]',
  })
  export class TableColumnFormatDirective {
  }
  
  my table-header-Directive
  
  @Directive({
  selector: 'trp-table-header',
  })
  export class TableHeaderDirective {
  @Input() public name: string;
  @Input() public field: string;
  @Input() public width: string;
  @Input() public isSearchable = false;
  @Input() public isMobileHeaderRow = false;
  @Input() public sorting = (_data: any, _sortHeaderId: string): 
  string =&gt; {
      return '';
  };
  
  @ContentChild(TableColumnFormatDirective, { static: false, read: 
  TemplateRef })
  public template: TemplateRef&lt;any&gt;;
  }
  </code></pre>
  
  <p>I expect to have an context-object in my Component like
  -->
  <code>&lt;td mat-cell *matCellDef="let element; let isMobile" [class.hidden-below-lg]="headerValue.isMobileHeaderRow" [innerHTML]="(element[headerValue.field] ? element[headerValue.field].toString() : '') | translate "&gt;&lt;/td&gt;
  or something</code></p>
  
  <p>At the beginning I followed this Tutorial: 
  <a href="https://blog.jonrshar.pe/2017/May/29/angular-ng-template-outlet.html" rel="nofollow noreferrer">https://blog.jonrshar.pe/2017/May/29/angular-ng-template-outlet.html</a></p>