Topic: mdbRadio button issue
Hi,
Setting class to label doesn't work and can't find another way to do it when using the button radio https://mdbootstrap.com/docs/angular/forms/radio-button/
I would like to do something like this
[ngClass]="{ 'active': item.value == formControl.value }"
I never get active class on any of the buttons, passing the active class statically doesn't work if the class is active
I also tried
[class.active]="item.value === formControl.value"
Note are dynamically inserted with *ngFor
Another issue is the rounded="true" is broken, the buttons not grouped anymore, aka rounded from both sides (It worked on 6.3.0)
PS: I'm on MDB 8.2.0
The 'active' class is reserved in this case and used in the internal implementation of the directive to style the buttons correctly. If you want to use your own custom class to style the buttons then you would need to implement custom radio directive as well and remove our mdbRadio input.
You can set ngModel value to number, it doesn't have to be a string.
You can use those styles for now as a workaround for the rounded buttons, we will fix this problem in the internal styles as well:
.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn-group:not(:last-child) > .btn {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.btn-group > .btn:not(:first-child), .btn-group > .btn-group:not(:first-child) > .btn {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
I prepared a simple example on which you can change active class programatically when certain condition is met:
<div class="btn-group">
<label
*ngFor="let item of options"
mdbBtn
color="purple"
class="form-check-label"
[ngClass]="{ active: item.value == theValue }"
>
<input class="form-check-input" type="radio" name="options" id="option1" />
{{ item.text }}
</label>
</div>
et3rnal87 pro commented 5 years ago
Could you please clarify more?
The documentation states that .active class needs to be added manually however you saying it's not allowed? I don't want to pass any classes, I want the button to indicate the selected option just like a radio button.
Could you provide some examples to overcome these limitations?
I don't think using ngModel is the acceptable solution anyway but, I'm passing number to ngModel and getting a string when checking the input value with formControl even with number pipe.
Ill check the style fix.
Arkadiusz Idzikowski staff commented 5 years ago
I edited my previous answer and added an example on which you can implement your custom solution. The problem with mdbRadio directive in this case is that it have its own logic that applies and removes 'active' class. We will take a closer look at the internal code to see if we can make it more flexible for cases similar to yours. We will also update the documentation to make it more readable and to avoid confusions in the future.
Another one issue with this control: it should work as an option. That means it should ignore click on the active option (button). But now this action unchecks active option (button). And then this button stops changing its state until you click on another button in the group.
Arkadiusz Idzikowski staff commented 5 years ago
Could you paste here the html/ts code you are using?
I'm printing the comparison and I can see it is true for one button at the time, when I use ngModel like your example it works but then it changes my value to string and I need it to stay as number
<div class="btn-group">
<label *ngFor="let item of options" mdbBtn color="purple" [ngClass]="{ 'active': item.value == theValue }" mdbRadio="{{item.value}}" mdbWavesEffect>{{item.text}} | {{item.value == theValue}}</label>
</div>
and
theValue = 2;
options:any[] = [
{
text: "one",
value: 1
},{
text: "two",
value: 2
},{
text: "three",
value: 3
}
]
This is a minimal example of the issue!
et3rnal87 pro commented 5 years ago
I expect the middle button to have active class but it doesn't change the class to something else other than active and it will work
[ngClass]="{ 'bingo': item.value == theValue }"
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.1.1
- Device: Windows
- Browser: Chrome
- OS: Win10
- Provided sample code: Yes
- Provided link: Yes
Arkadiusz Idzikowski staff commented 5 years ago
Could you provide some example code on which we will be able to debug the first problem with 'active' class. In this case it seems like the result of the condition that you added to
ngClassis always falsy, but we don't know what exactly do you compare there.We will take a closer look at the problem with rounded button groups.