I’m trying to use a simple radio button group with ngModel in Angular 17. Additionally, I have a directive (appTest) and inside this directive, I need to access the ngControl property.

<div class="example-radio-group">
  <mat-radio-group [(ngModel)]="modelValue">
    <mat-radio-button appTest value="1">Option 1</mat-radio-button>
    <mat-radio-button appTest value="2">Option 2</mat-radio-button>
    <mat-radio-button appTest value="3">Option 3</mat-radio-button>
    <mat-radio-button appTest value="4">Option 4</mat-radio-button>
    <mat-radio-button value="5">Option 5</mat-radio-button>
    <mat-radio-button value="6">Option 6</mat-radio-button>
  </mat-radio-group>
</div>

In Angular 6, this worked fine, but I am having trouble getting it to work in Angular 17. Below are my examples and the relevant code.

Example in Angular 6 (Works):
https://stackblitz.com/edit/angular-6-material-inputs-4k2xuv?file=main.ts

Example in Angular 17 (Not Working):
https://stackblitz.com/edit/playground-angular-17-material-nsu3nd-kmjrc8?file=src%2Fapp%2Fapp.component.ts