Styjun

Planet that’s 90% water or more?

Does POSIX guarantee the paths to any standard utilities?

How does Harry wear the invisibility cloak?

What is this red bug infesting some trees in southern Germany?

Splitting polygons at narrowest part using R?

How will the UK Commons debate tonight despite the prorogation?

What exactly is a softlock?

Which is the best password hashing algorithm in .NET Core?

Is Levitate supposed to basically disable a melee based enemy?

Why don't they build airplanes from 3D printer plastic?

What did Boris Johnson mean when he said "extra 34 billion going into the NHS"

Powering an offset stacked array of pistons

Does immunity to damage from nonmagical attacks negate a rogue's Sneak Attack damage?

Generate points for smooth movement between two given points

The little bee buzzes around the flower garden

How do I stop making people jump at home and at work?

Do 643,000 Americans go bankrupt every year due to medical bills?

How does speed affect lift?

Why didn't Thatcher give Hong Kong to Taiwan?

To which airspace does the border of two adjacent airspaces belong to?

Can a country avoid prosecution for crimes against humanity by denying it happened?

Importance of electrolytic capacitor size

Did the US Climate Reference Network Show No New Warming Since 2005 in the US?

How do I make my fill-in-the-blank exercise more obvious?

Primeng p-radioButton - text as anchor

How to bind RadioButtons to an enum?radio button focused instead of the anchor element (IE9 issue)Radiobutton issue with Opera MiniHow to setup a RadioButton set within templates?How can I make Tcl/Tk buttons behave like radiobuttons?Radio button values in Python Tkinterlabel containing a-href-tag doesn't trigger it's inputIs it possible in android to put the drawableLeft image of radio button to the extreme left of the icon?Enlarge the radiobutton and checkbox bullet binding with Text sizeHow to pass the value of the button in the radiobutton on the second page

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

Is it possible to transform the text of a radio button to an anchor?

https://www.primefaces.org/primeng/#/radiobutton

In this case, Option 1 could be a link that the user clicks to open a new browser window to view the page.

This will not work:

 <p-radioButton name="operation_group" [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>

typescript radio-button primeng

share|improve this question

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why are you use radio button if you want to open a link on click?
  
  – Zarna Borda
  Mar 28 at 3:30
  

  
  
  
  

add a comment | 

1

Is it possible to transform the text of a radio button to an anchor?

https://www.primefaces.org/primeng/#/radiobutton

In this case, Option 1 could be a link that the user clicks to open a new browser window to view the page.

This will not work:

 <p-radioButton name="operation_group" [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>

typescript radio-button primeng

share|improve this question

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why are you use radio button if you want to open a link on click?
  
  – Zarna Borda
  Mar 28 at 3:30
  

  
  
  
  

add a comment | 

Is it possible to transform the text of a radio button to an anchor?

https://www.primefaces.org/primeng/#/radiobutton

In this case, Option 1 could be a link that the user clicks to open a new browser window to view the page.

This will not work:

 <p-radioButton name="operation_group" [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>

typescript radio-button primeng

share|improve this question

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

 <p-radioButton name="operation_group" [(ngModel)]="modelcol" tabindex=2 inputId="opt1">
 <a href="https://www.thesitewizard.com/">Operation</a> </p-radioButton>

share|improve this question

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

share|improve this question

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

asked Mar 28 at 3:12

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

2 Answers
2

active

oldest

votes

1

There is no easy way to directly implement this in Primeng. But you need to do a trick for this. Might it would not be the best solution but it will serve your purpose. It is a workaround only.

Taking the example of Primeng Radio button.

I have added a custom class customeRadio in html and also added <a>tag in same as option value.

<div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
 </p-radioButton><a href="">Option 1</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
 </p-radioButton><a href="">Option 2</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
 </p-radioButton><a href="">Option 2</a>
 </div>

Now in styles.css file or where where you want to write the css for it.

Just hide the all label content using css selector property:

.customeRadio label
 display:none;

That's all !

share|improve this answer

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

add a comment | 

1

No css needed, just set label to empty string and add the anchor.

share|improve this answer

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55389609%2fprimeng-p-radiobutton-text-as-anchor%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

There is no easy way to directly implement this in Primeng. But you need to do a trick for this. Might it would not be the best solution but it will serve your purpose. It is a workaround only.

Taking the example of Primeng Radio button.

I have added a custom class customeRadio in html and also added <a>tag in same as option value.

<div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
 </p-radioButton><a href="">Option 1</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
 </p-radioButton><a href="">Option 2</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
 </p-radioButton><a href="">Option 2</a>
 </div>

Now in styles.css file or where where you want to write the css for it.

Just hide the all label content using css selector property:

.customeRadio label
 display:none;

That's all !

share|improve this answer

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

add a comment | 

1

There is no easy way to directly implement this in Primeng. But you need to do a trick for this. Might it would not be the best solution but it will serve your purpose. It is a workaround only.

Taking the example of Primeng Radio button.

I have added a custom class customeRadio in html and also added <a>tag in same as option value.

<div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
 </p-radioButton><a href="">Option 1</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
 </p-radioButton><a href="">Option 2</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
 </p-radioButton><a href="">Option 2</a>
 </div>

Now in styles.css file or where where you want to write the css for it.

Just hide the all label content using css selector property:

.customeRadio label
 display:none;

That's all !

share|improve this answer

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

add a comment | 

There is no easy way to directly implement this in Primeng. But you need to do a trick for this. Might it would not be the best solution but it will serve your purpose. It is a workaround only.

Taking the example of Primeng Radio button.

I have added a custom class customeRadio in html and also added <a>tag in same as option value.

<div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
 </p-radioButton><a href="">Option 1</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
 </p-radioButton><a href="">Option 2</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
 </p-radioButton><a href="">Option 2</a>
 </div>

Now in styles.css file or where where you want to write the css for it.

Just hide the all label content using css selector property:

.customeRadio label
 display:none;

That's all !

share|improve this answer

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

<div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 1" label="Option 1" [(ngModel)]="val1" inputId="opt1">
 </p-radioButton><a href="">Option 1</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 2" label="Option 2" [(ngModel)]="val1" inputId="opt2">
 </p-radioButton><a href="">Option 2</a>
 </div>
 <div class="ui-g-12 customeRadio">
 <p-radioButton name="group1" value="Option 3" label="Option 3" [(ngModel)]="val1" inputId="opt3">
 </p-radioButton><a href="">Option 2</a>
 </div>

.customeRadio label
 display:none;

share|improve this answer

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

answered Mar 28 at 12:00

DirtyMindDirtyMind

1,14699 silver badges2626 bronze badges

1

No css needed, just set label to empty string and add the anchor.

share|improve this answer

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

add a comment | 

1

No css needed, just set label to empty string and add the anchor.

share|improve this answer

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

add a comment | 

No css needed, just set label to empty string and add the anchor.

share|improve this answer

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

share|improve this answer

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges

answered Mar 31 at 4:57

dirtyw0lfdirtyw0lf

62033 gold badges1111 silver badges3939 bronze badges