I cant figure how to set the context of a click event inside a ng-template. I am playing around with ngTemplateOutlet and having issue with getting the ng-template context. I am trying to inject an ng-template into a components using @input params. This work fine but the event that I wired up on parent template is not changing the object that i modified. It hits the function but nothing is happend to the UI. Here is my parent template.

H2 Parent template

<ng-template #contentTemplate>
    <form>
        <label>FirstName:</label>
        <input type="text"/>
        <mat-icon>cancel</mat-icon>
      </form>
</ng-template>
<ng-template #contentAction let-close="close">
    <button mat-button (click)="close($event)">Cancel</button>
    <button mat-button (click)="onSubmit($event)">Submit</button>
</ng-template>

H2 Child template

<ng-template cdk-portal #dialog="cdkPortal">
  <div>
    <mat-toolbar color="primary">
      <span>Application Title</span>
      <span style="flex: 1 1 auto;"></span>
      <span>Right Aligned Text</span>
      <mat-icon (click)="preClose($event)">close</mat-icon>
    </mat-toolbar>
    <div>
      <ng-template *ngTemplateOutlet="content; context: { close: this.preClose}"></ng-template>
    </div>
    <div style="text-align: center;">
      <ng-template *ngTemplateOutlet="actions"></ng-template>
    </div>
  </div>
</ng-template>

I am calling the same function on cancel but as when i click the x button to close the modal. The x button works but the cancel is not doing anything at the moment. I assume it not the right context.

Here is the link to stackblitz stackblitz