These are chat archives for angular/material

Nov 2018
Jonny Nguyen
Nov 04 2018 15:45

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>
        <input type="text"/>
<ng-template #contentAction let-close="close">
    <button mat-button (click)="close($event)">Cancel</button>
    <button mat-button (click)="onSubmit($event)">Submit</button>

H2 Child template

<ng-template cdk-portal #dialog="cdkPortal">
    <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>
      <ng-template *ngTemplateOutlet="content; context: { close: this.preClose}"></ng-template>
    <div style="text-align: center;">
      <ng-template *ngTemplateOutlet="actions"></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

Michael Prentice
Nov 04 2018 18:03
@Thuthinh this channel is for AngularJS Material. The Angular Material channel is