CODEWITHSUNDEEP
angularangular6primengprimeicons
Prakhar
Prakhar

Reputation: 25

Primeng RadioButton Label

I have just started learning Primeng. I was working on the radio button and using the label property to display the label. When I use this radio button inside any component with restricted length and width, the labels with longer length comes below the radio button and spoil the look and feel. Following is the code:

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton name="city" label="City(Label with lots of words)" inputId="city1"></p-radioButton>
</div>

So I tried an alternative I used a label tag and tried the following thing:

component.html

<h5>Basic</h5>
<div class="p-field-radiobutton">
    <p-radioButton #labelClicked name="city" inputId="city1"></p-radioButton>
    <label (click)="onlabelClick()">
    City(Lots of words)
  </label>
</div>

component.ts

import { Component, ViewChild } from '@angular/core';
import { RadioButton } from 'primeng/radiobutton'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
  @ViewChild("labelClicked") labelClicked : RadioButton
    onlabelClick(){
      this.labelClicked.onClick.emit();
//tried this also
       this.labelClicked.checked;
        }
    }

Now the CSS and look and feel is as expected but when I click on label the radio button doesn't becomes "as checked".

I want that whenever I click on the radioButton or the Label in both the cases the radio button should be in checked state and the CSS should also be as expected.

I hope I am able to explain the scenario.

Thanks in advance.

Upvotes: 1

Views: 3397

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

there is several way to accumulation sync label click with the radio component

  • use label for attribute so you need to set inputId property for radioButton
<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Chicago" [(ngModel)]="city" inputId="city1">
    </p-radioButton>
    <label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="Los Angeles" [(ngModel)]="city"inputId="city2">
  </p-radioButton>
 <label for="city2">Los Angeles</label>
</div>
  • trigger the select method of radioButton component
<p-radioButton name="city" value="Istanbul" [(ngModel)]="city" #elm></p-radioButton>
<label  (click)="elm.select()">Istanbul</label>

even in your question just trigger the select method

  • set the control state in case of reactive form or template form this will update the component check state
<div class="p-field-radiobutton">
    <p-radioButton name="city" value="Earth" [(ngModel)]="city"></p-radioButton>
    <label  (click)="city = 'Earth'">Istanbul</label>
</div>

stackblitz demo 🚀🚀

Upvotes: 1

Related Questions