Add a checked attribute to a dynamic radio button - html

Question

I'm building a *ngFor dynamic radio button. I need to add some kind of attribute that can be used to determine if the button is active or not. This is not for the purpose of functionality, the selection builds the property on my reactive form fine. The purpose is to satisfy testing.
<label *ngFor="let order of orders">
<input formControlName="orders" type="radio" name="orders" [value]="order.id" />
{{order.name}}
</label>
I've tried adding a checked attribute but this just adds the attribute to all radios. I thought angular provided a ngChecked property, but I think that was for AngularJS.
Any solution to determine/show that the selected radio is active would be a solution.
https://stackblitz.com/edit/angular-t2gd4g

Answer 1

simply by get the value of the form control orders you will be applied to know the selected one or in case of apply a spesifect design you can add a checked class for the selected one
<label *ngFor="let order of orders"
[ngClass]="{'checked':form.get('orders').value == order.id}">
<input formControlName="orders" type="radio" name="orders" [value]="order.id" />
{{order.name}}
</label>
another way to get the selected order by create a property
get selectedOrder() {
const selected =this.form.get('orders').value;
if (selected) {
return this.orders.find(o => o.id == selected )
} else {
return null
}
}
demo 🚀

Answer 2

In your .ts file declare changeHandler() function like this :
changeHandler(index){
console.log(`radio-button ${index+1} is active`);
}
In your .html file, in your *ngFor declare index which can be used to find the current state of checkbox. So the following demo shows which checkbox is active :
<label *ngFor="let order of orders; let i = index;">
<input formControlName="orders" type="radio" name="orders" [value]="order.id" (ngModelChange)="changeHandler(i)"/>
{{order.name}}
</label>
Demo : enter link description here
Note : see console to see active button