Passing function to ngtemplate and update component value

I have a checkbox and two buttons to increment or decrement minutes variable from the component. I will have three similar sections which contain same fields. Hence decided to go with ngtemplate way avoiding duplicate code.

Click events make it to the component fine. Issues are:

1. checkbox value is not updated automatically.
2. When buttons are clicked, I get an error: ERROR TypeError: this is undefined (app.component.ts:27)

app.component.html

Testing NGContainer:

<ng-container
[ngTemplateOutlet]="allowanceTemplate"
[ngTemplateOutletContext]="{
allowLabel: 'Lunch',
cbAction: cbClicked,
addAction: addLunchMinutes,
minusAction: minusLunchMinutes,
cbName: cbChecked,
minutesOut: lunchMinutes
}">
</ng-container>

<ng-template
#allowanceTemplate
let-allowLabel="allowLabel"
let-addAction="addAction"
let-minusAction="minusAction"
let-cbName="cbName"
let-cbAction="cbClicked"
let-minutesOut="minutesOut"
>
<div>
<label class="cb-container">
<input
type="checkbox"
checked="cbName"
name="cbName"
(click)="cbClicked($event)"
/>
<span class="cb-checkmark"></span>
</label>
<label for="">Minutes:</label>
<button value="Minus" (click)="minusAction(allowLabel)">Minus</button>
<label for="" class="innings-values">{{ minutesOut }}</label>
<button value="Add" (click)="addAction(allowLabel)">Add</button>
</div>
</ng-template>


app.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, FormsModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
})
export class AppComponent {
lunchMinutes: number = 30;
cbChecked: boolean = true;

cbClicked(event: any) {
console.log('cbClicked ' + this.cbChecked);
}

addLunchMinutes(allow: any) {
console.log('addLunchMinutes ' + allow);
this.lunchMinutes--;
}

minusLunchMinutes(allow: any) {
console.log('minusLunchMinutes ' + allow);
this.lunchMinutes++;
}
}


index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>My app</title>
<meta charset="UTF-8" />
<base href="/" />
</head>
<body>
<main-root>Loading...</main-root>
</body>
</html>


I further tried building the context in the component and passing it to the ngtemplate tag. I get same error:

lunchCtx = {allowLabel:'Lunch',
cbAction: this.cbClicked,
addAction:this.addLunchMinutes,
minusAction:this.minusLunchMinutes,
cbName:this.lunchMinsChecked,
minutesOut:this.lunchMinutes};

<ng-container
*ngTemplateOutlet="allowanceTemplate;lunchCtx">
</ng-container>


Stackbliz is available here

Continue reading...