I have an *ngIf with an else template defined as such:
<button type="button" *ngIf="!paused; else resume" (click)="pause()">
pause
</button>
<ng-template #resume>
<button type="button" (click)="resume()">
resume
</button>
</ng-template>
class AppComponent {
paused = false;
pause() {
this.paused = true;
}
resume = () => {
this.paused = false;
}
}
The pause button works, but clicking the resume button will log a console error:
Error: jit_nodeValue_4(...) is not a function
Here is a runnable demo of the issue. Click the 'Resume' button and check console for errors.
The name of the inline template resume conflicts with the method name resume. The template basically overwrites the method, hence the error.
If you change the template name, it will work:
<button type="button" *ngIf="!paused; else resumeTpl" (click)="pause()">
pause
</button>
<ng-template #resumeTpl>
<button type="button" (click)="resume()">
resume
</button>
</ng-template>