I have a div which has a couple of clr radio buttons wrapped in a .I want to generate the radioButtons based on a boolean value. Following is the code.
<div class="clr-col-4">
<clr-radio-container>
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I have a variable named enableButton. If the enableButton is true, I want to show the radio button, else I don't want to. Could you please help me how to do this?
You can use the ngIf directive. It is an essential thing to have in mind when creating Angular templates.
<div class="clr-col-4">
<clr-radio-container *ngIf="enableButton">
<label class="display-label">Radio Div</label>
<clr-radio-wrapper *ngFor="let col of cols">
<input type="radio" clrRadio />
<label class="display-label" {{col.headerName}}</label>
</clr-radio-wrapper>
</clr-radio-container>
</div>
I suggest you read the docs to familiarise more with the directive and its other conditional variations like then, else, etc.
Related
Looking the w3Schools Bootstrap's Input Groups examples there are Input Groups Labels that seems that wrap the input box
(here).
Is there any way to do this for checkbox too?
EDIT
The labels have to be inside that grey box attached to the input box (textbox in example case, checkbox in the case i want)
They don't wrap the input field since the closing tag comes right after the opening tag, but you can use label on a checkbox as well as described here in the offical bootsrap docs for forms:
Is it something like this you had in mind?
<div class="container mt-3">
<h2>Checkbox Group Labels</h2>
<form>
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<div class="input-group mb-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
</div>
</div>
</form>
</div>
I'm new to Angular and Implementing a Quiz containing multiple MCQs.
But I am having trouble in radio button selection.
My Questions are coming from the database and Options too.
mcq.component.html
<form (ngSubmit)="ff.form.valid && answer(ff)" #ff="ngForm">
<div *ngFor="let question of questions">
<p style="font-size: 25px;">{{question.title}}</p>
<div *ngFor="let option of question.options">
<input [(ngModel)]="option_model.selected_option_id" #selected_option_id="ngModel" type="radio" value="{{option.id}}" name="{{question.id}}">
<!-- <input type="radio" value="{{option.id}}" name="{{question.id}}" ngModel > --> //This way it works fine but I need to use [(ngModel)] to submit the form
{{option.title}}
</div>
</div>
<input style="float: right" type="submit" value="Submit"/>
</form>
Note: The {{question.id}} is unique for each question. Also, this works well if I remove the [(ngModel)] attribute.
And here is what I'm trying to accomplish
The Problem: When I select an option from the second question it deselects the selected option from the First Question. Means I am only able to select one option from both questions.
Please Help me, what I am doing wrong. I've been stuck here for two days.
Okay, Git it Sorted. The issue was with the ngModel and name attribute
It works fine like this
<input [(ngModel)]="options[question.id]" [checked]="options[question.id]" value="{{question.id}}-{{option.id}}" type="radio"
name="option{{question.id}}">
And in typescript
options: any = [];
option: any = [];
Edit:
I am getting undefined when I tried to submit the ng-model of the radio.
Sample code in my submit button:
ng-click="addSubscriber(plan)"
Tried to console.log(plan) inside the addSubscriber() but getting undefined.
I am having headache because of the problem of getting the selected value of radio button. The value is showing and it is rendering radio depends on my data. But ng-model doesn't work, I can't get the value of selected radio.
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label><input type="radio" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name | capitalize}}
</label>
</div>
</div>
<pre>{{plan.plan}}</pre>
</div>
No value is showing in <pre> tag. I searched and tried some posted answers in other topics but its not working.
Update:
Another problem was that the ng-model inside the ng-repeat was unable to update the controller variable, this is due to that fact that.
ng-repeat directive creates a new scope.
Thus we need to change the ng-model from chosenPlan to $parent.chosenPlan, which will update the parent scope instead.
In the above scenario, the input radio buttons need to be set under a common name for them to act as group of radio buttons. The value of the radio button also needs to be set to a common variable which can be used in the submit function.
<label>
<input type="radio" ng-model="$parent.chosenPlan" ng-value="plan.plan_code" name="test"/>
{{plan.plan_name | capitalize}}
</label>
In the above form we can see that the ng-model is set to a common variable. The group name name attribute is set to a common name.
Please find below a working model of the same.
JSFiddle Demo
Old Answer:
The <pre> tag lies outside the ng-repeat move it inside, change the value to ng-value as shown below. Name for it to have the proper value should be name="{{plan.plan_name}}". Let me know if you face any issues.
<div ng-controller='MyController'>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label>
<input type="radio" ng-model="plan.plan" ng-value="plan.plan_code" name="{{plan.plan_name}}"/>{{plan.plan_name | capitalize}}
</label>
<pre>{{plan.plan}}</pre>
</div>
</div>
</div>
</div>
Mocked up the data and providing an example for reference:
JSFiddle Demo
Your <pre>{{plan.plan}}</pre> is out of the scope of the ng-repeat so plan.plan is unrecognized. If you would like to show a value for each radio button, you can try it like that -
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div ng-repeat="plan in plans" class="radio">
<label><input type="radio" ng-change="radioChanged()" ng-model="plan.plan" value="{{plan.plan_code}}" name="plan.plan_name">{{plan.plan_name}}
</label>
<pre>{{plan.plan}}</pre>
</div>
</div>
I have also added a 'ng-change' function, so you can try to put some debugger inside that function and watch the changed value inside your controller.
I am trying to build a basic colorpicker with predefined colors.
for that I have an object "colors" with color-values as it's properties:
public colors = [
{ value: '#ffffff' },
{ value: '#919191' },
{ value: '#555555' },
// and some more
];
Following some examples on the web, I set up a select-option structure in my html:
<select name="role" [(ngModel)]="item.color">
<option *ngFor="let color of colors" [value]="color.value">
<div class="color-box-modal" [style.background]="color.value"></div>
</option>
</select>
This does create a dropdown menu for the options, though the colors inside don't show up. The class color-box-modal has height and width values as I did not intend to have a dropdown, but several colored boxes to click on in order to select.
Is there an alternative to the select-option structure which allows me to not have a dropdown, but just several colored boxes? Radio-buttons/checkboxes are not the desirerable way either, as I want to have a clickable field on it's own that reacts to being clicked.
If there is no alternative, is it possible to do the ngModel binding on a button-click?
edit:
After testing option 2 on Osman Ceas answer, I now have this:
<ng-template #content let-c="close" let-d="dismiss">
<i class="close icon" (click)="d('Close click x')"></i>
<div class="header">
Choose a new color
</div>
<div class="content">
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="c('#ffffff')" id="col1" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffffff'">
</label>
<label for="col2" class="color-box-modal" style="background-color: #ffff00">
<input (click)="c('#ffff00')" id="col2" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#ffff00'">
</label>
<label for="col3" class="color-box-modal" style="background-color: #00ffff">
<input (click)="c('#00ffff')" id="col3" type="radio" class="hidden" [(ngModel)]="item.color" [value]="'#00ffff'">
</label>
</div>
<div class="actions">
<div class="ui button" (click)="c('Close click cancel')">Cancel</div>
</div>
</ng-template>
Though the ngModel binding does not seem to work.
The whole thing opens in a modal (the template), which in itself works, just binding to the ngModel, as I said, does not.
A native HTML select will only render text inside and any other tag will be ignored, so that's why your boxes are not showing.
If your wrap your radio button or checkbox in a <label> with the attribute for equals to an ID given to the <input>, you can basically click anywhere on the label, lets say some adjacent text, and the click will propagate to the input so the binding will still work.
You can create your own custom form controls, check out this article. So you could create a custom color picker form element that will work in any form using template forms or reactive forms.
Have a nice day
Now, this might not help everyone, but it was my solution in the end.
I started with a loop, item of items where the template in my question was meant for one single item.
I solved, or rather worked around the binding situation by just moving each item to it's own component, somewhat like this:
<div *ngFor="let item of items>
<app-sub-item [item]="item"></app-sub-item>
</div>
inside I have severel of these:
<label for="col1" class="color-box-modal" style="background-color: #ffffff">
<input (click)="setColor('#ffffff')" id="col1" type="radio" class="hidden">
</label>
With the following being in the ts-file:
setColor(color: string) {
this.item.color = color;
}
This actually works just fine at the moment.
Hope whoever reads this issue can find some use in my solution.
I would like to create three state button in Angular2 using css- yes/none/no without using jQuery. I found this link in some answer on stackoverflow. The point is, that I need to put a few buttons next to each other, and each of them should be independent- every chosen value should be send to component. I've tried to use label implicitly (remove inputs ids), but it doesn't work. Please see full code: fiddle.
<div class="wrapper">
<div class="toggle_radio">
<label for="first_toggle">First Button <input type="radio" class="first_toggle" name="toggle_option"></label>
<label for="second_toggle">Second Button<input type="radio" checked class="second_toggle" name="toggle_option"></label>
<label for="third_toggle">Third Button <input type="radio" class="third_toggle" name="toggle_option"></label>
<div class="toggle_option_slider">
</div>
</div>
</div>