Checking PrimeNG-radiobutton by default if only one radio button exists on form

Question

I started using PrimeNG components for Angular7 and set up my very first radio buttons. I was able to set specific radio button checked by default. My objective however is to count amount of radio buttons existing on form and set radio button checked by default IF there is only one radio button on form. This is not very ideal approach if values are hard coded but I'm going to add backend for this application later on, so counting amount of radio buttons (rows coming from database) is crucial.

I have searched for solution online and especially Stack but I'm struggling only getting AngularJS or other related solutions. I want to stick with Angular. I'm using Angular7 and PrimeNG UI component.

(PrimeNG documentation: https://www.primefaces.org/primeng/#/radiobutton)

home.component.html

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="preopt1"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="preopt2"></p-radioButton></div>
    <div class="ui-g-12"><p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="preopt3"></p-radioButton></div>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string = 'Option 1';

  constructor() { }

  ngOnInit() {
  }
}

Expected outcome would be that if only one radio button exists on form, it is selected/checked by default, otherwise don't select/check anything by default.

I'm new to Angular but very eager to learn. Any help would be greatly appreciated. Thank you.

Answer 1

My solution is this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.sass']
})
export class HomeComponent implements OnInit {

  val1: string;

  radios = [
    {
      value: 'Option 1',
      label: 'Option 1',
      inputId: 'preopt1'
    },
    {
      value: 'Option 2',
      label: 'Option 2',
      inputId: 'preopt2'
    },
    {
      value: 'Option 3',
      label: 'Option 3',
      inputId: 'preopt3'
    }
  ];

  constructor() {
    if ( this.radios.length === 1 ) {
      this.val1 = this.radios[0].value;
    } else {
      this.val1 = 'None';
    }
  }

  ngOnInit() {
  }
}

home.component.html

<h3>Preselected value of "Option 1"</h3>
<div class="ui-g" style="width:250px;margin-bottom:10px">
    <div class="ui-g-12"><p-radioButton *ngFor="let i of radios" name="group2" [value]="i.value" [label]="i.label" [(ngModel)]="val1" [inputId]="i.inputId"></p-radioButton></div>
</div>

You can delete 2 elements of the radios array so you can see the behavior of the component.