Custom mat-radio-group in Angular 12 not working? - angular-material

Question

I have problem when custom using mat-radio-group and mat-radio-button in Angular 12.
I have my-radio-group that wrap mat-radio-group and some my-radio-button as the ContentChildrens,
my-radio-button component wrap mat-radio-button.
But i cannot use ngModel to binding and handle change event when select radio.
It used to work well in Angular 7 before.
Can anyone help me this issue?
Sorry if my english is not quite good,
Thank you so much :)
My code here:
app.component.ts
_selection: any = 1;
get selection() {
return this._selection;
}
set selection(val: any) {
this._selection = val;
}
onChange($event: any): void {
}
app.component.html:
<my-radio-group [(ngModel)]="selection" (change)="onChange($event)">
<br/>
<my-radio-button [value]="1">Radio 1</my-radio-button>
<br/>
<my-radio-button [value]="2">Radio 2</my-radio-button>
<br/>
<my-radio-button [value]="3">Radio 3</my-radio-button>
<br/>
<my-radio-button [value]="4">Radio 4</my-radio-button>
</my-radio-group>
my-radio-group.component.ts:
export const MY_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MyRadioGroupComponent),
multi: true
};
#Directive({
selector: "my-radio-group",
providers: [
MY_RADIO_GROUP_CONTROL_VALUE_ACCESSOR,
{provide: MatRadioGroup, useExisting: MyRadioGroupComponent}
]
})
export class MyRadioGroupComponent extends MatRadioGroup {
}
my-radio-button.component.ts
#Component({
selector: "my-radio-button",
templateUrl: "./my-radio-button.component.html"
})
export class MyRadioButtonComponent {
#Input() value: any;
#Input() disabled: boolean | undefined;
}
my-radio-button.component.html
<mat-radio-button [value]="value" [disabled]="disabled">
<ng-content></ng-content>
</mat-radio-button>