Primeng p-radioButton - text as anchorHow 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
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;
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
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
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
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 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
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
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
typescript radio-button primeng
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
asked Mar 28 at 3:12
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
6203 gold badges11 silver badges39 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 |
Why are you use radio button if you want to open a link on click?
– Zarna Borda
Mar 28 at 3:30
Why are you use radio button if you want to open a link on click?
– Zarna Borda
Mar 28 at 3:30
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 |
2 Answers
2
active
oldest
votes
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 !
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
add a comment |
No css needed, just set label to empty string and add the anchor.
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 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
);
);
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
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
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 !
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 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 !
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 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 !
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
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 !
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
answered Mar 28 at 12:00
DirtyMindDirtyMind
1,1469 silver badges26 bronze badges
1,1469 silver badges26 bronze badges
add a comment |
add a comment |
No css needed, just set label to empty string and add the anchor.
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
add a comment |
No css needed, just set label to empty string and add the anchor.
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
add a comment |
No css needed, just set label to empty string and add the anchor.
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
No css needed, just set label to empty string and add the anchor.
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
answered Mar 31 at 4:57
dirtyw0lfdirtyw0lf
6203 gold badges11 silver badges39 bronze badges
6203 gold badges11 silver badges39 bronze badges
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
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
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Why are you use radio button if you want to open a link on click?
– Zarna Borda
Mar 28 at 3:30