How to get radio id or name on button click (located in isolated div)

I am using Angular 13 and below is the html code. There are two radio groups teamStrength and companyStrength. I want to get id or name of selected radio on button click for the method loadDataForNextTab().

 <div class="section team_strength">
<h3 class="team-heading">Team Strength:</h3>
<div class="team-wrapper">
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-me" class="teamsStrength">
<label for="team-me">Just Me</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-one_five" class="teamsStrength">
<label for="team-one_five">1 - 5</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-five_thirty" class="teamsStrength" checked>
<label for="team-five_thirty">5 - 30</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-thirty_fifty" class="teamsStrength">
<label for="team-thirty_fifty">30 - 50</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-fifty_hundread" class="teamsStrength">
<label for="team-fifty_hundread">50 - 100</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-hundread_twoHundread" class="teamsStrength">
<label for="team-hundread_twoHundread">100 - 200</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-twoHundred_fiveHundred" class="teamsStrength">
<label for="team-twoHundred_fiveHundred">200 - 500</label>
</div>
<div class="input-wrapper">
<input type="radio" name="team-strength" id="team-fiveHundredPlus" class="teamsStrength">
<label for="team-fiveHundredPlus">500+</label>
</div>
</div>
</div>
<div class="section company_strength">
<h3 class="company-heading">Company Strength:</h3>
<div class="company-wrapper">
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-one_five" class="companyStrength">
<label for="company-one_five">1 - 5</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-five_thirty" class="companyStrength">
<label for="company-five_thirty">5 - 30</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-thirty_fifty" class="companyStrength">
<label for="company-thirty_fifty">30 - 50</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-fifty_hundread" class="companyStrength">
<label for="company-fifty_hundread">50 - 100</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-hundread_twoHundread" class="companyStrength">
<label for="company-hundread_twoHundread">100 - 200</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-twoHundred_fiveHundred" class="companyStrength">
<label for="company-twoHundred_fiveHundred">200 - 500</label>
</div>
<div class="input-wrapper">
<input type="radio" name="company-strength" id="company-fiveHundredPlus" class="companyStrength">
<label for="company-fiveHundredPlus">500+</label>
</div>
</div>
</div>
<div class="section bottom">
<div class="button-wrapper">
<button class="btn btn-danger butn butn-next" (click)="loadDataForNextTab()">Next</button>
<button class="btn butn butn-skip">Skip for now</button>
</div>
</div>

Currently, I am using below ts code to get id.

const dom: HTMLElement = this.elementRef.nativeElement;
const teamStrengthelements = dom.querySelectorAll('.teamsStrength');
const companyStrengthelements = dom.querySelectorAll('.companyStrength');
let teamElementIdHolder: String = '';
let companyElementIdHolder: String = '';
teamStrengthelements.forEach((element: any) => { if (element.checked) { teamElementIdHolder = element.id } });
companyStrengthelements.forEach((element: any) => { if (element.checked) { companyElementIdHolder = element.id } });

Is the approach good? Or is there any better way to deal with this? Please help.

There is nothing wrong with the approach but there is definitely a better way to achieve the same.

I would highly recommend looking at Angular Material library. It will help you a lot with UI creation as there are ready to use components.

In your html file:

<mat-radio-group
aria-label="Select an option"
(change)="selectionChange($event)">
<mat-radio-button value="One">Option 1</mat-radio-button>
<mat-radio-button value="Two">Option 2</mat-radio-button>
</mat-radio-group>

In your ts file:

selectionChange(data: MatRadioChange) {
console.log(data.value);
}

Also would recommend to create an array of your data object and have *ngFor generate the html for you. It will make your code concise and readable.

In your html file:

<mat-radio-group
aria-labelledby="example-radio-group-label"
[(ngModel)]="favoriteSeason">
<mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
{{season}}
</mat-radio-button>
</mat-radio-group>

In your ts file:

@Component({
selector: 'radio-ng-model-example',
templateUrl: 'radio-ng-model-example.html',
styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
favoriteSeason: string;
seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

Hope this helps.

you can use something like below and modify the selector if there are other radio inputs.

[...this.elementRef.nativeElement.querySelectorAll('input[type=radio]:checked')].map(el => el.id)

This ids are extracted from the returned NodeList and can be used accordingly.