Question 178134 in Html Question posted in
Some basic documentation can be found here.

Html – 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.

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search