RadioButton inside Table using Blazor - html

Question

First of all, I am using Blazor WebAssembly 3.2.0 Preview 4.
I have a list of objects named ObjectList and each object has an bool property named principal. This list populates a table.
The logic is that only one element in the list can have the value of principal property set to true so this is why radio buttons are ideal.
In this example, I am using MatBlazor as a library for controls.
Is there a way to put radiobutton for this property inside a table as in the code below?
<table class="table table-condensed">
<thead>
<tr>
<th>Object</th>
<th>Principal</th>
</tr>
</thead>
<tbody>
#foreach (var object in ObjectList)
{
<tr>
<td>#object .name</td>
<td>
<MatRadioButton TValue="bool" Value="#object.principal"></MatRadioButton>
</td>
</tr>
}
</tbody>
</table>

Answer 1

The MatRadioButton button goes inside a MatRadioGroup:
<MatRadioGroup #bind-Value="#Val1" TValue="string">
<MatRadioButton Value="#string.Empty" TValue="string">Default</MatRadioButton>
<MatRadioButton Value="#("f")" Label="Female" TValue="string"></MatRadioButton>
<MatRadioButton Value="#("m")" TValue="string">Male</MatRadioButton>
<MatRadioButton Value="#("d")" Disabled="true" TValue="string">Disabled</MatRadioButton>
</MatRadioGroup>
#code
{
protected string Val1;
}
MatRadioButton Documenation
So in your case, it might be something like:
<MatRadioGroup #bind-Value="#object.principal" TValue="bool">
<MatRadioButton Value="true" TValue="bool">True</MatRadioButton>
<MatRadioButton Value="false" TValue="bool">False</MatRadioButton>
</MatRadioGroup>
I share this here also because I needed similiar, and there weren't many great answers around to be found.