I have implemented radio buttons within a div with the following CSS styles (to enable selection by clicking on the div):
.plans-list {
display: flex;
justify-content: center;
margin: 2rem 0;
.plan {
display: flex;
margin: 0 0.5rem;
position: relative;
&:hover {
::ng-deep .card {
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
}
&__type {
display: block;
width: 100%;
height: 100%;
visibility: hidden;
position: absolute;
z-index: 2;
}
}
}
<div class="plans-list">
<div class="plan" *ngFor="let plan of planTypes">
<input (click)="calculateTotal()" class="plan__type" type="radio" name="planType" [value]="plan.value"
formControlName="planType" #planType>
<app-plan-item [type]="plan.title" [active]="planType.checked" [params]="planParameters">
</app-plan-item>
</div>
</div>
However, when clicking on the radio button, it does not work as expected and the active class is not assigned to the app-plan-item element. What could be causing this issue?
Check out the demo here:: https://stackblitz.com/edit/angular-ahw2bf?file=src%2Fapp%2Fapp.component.css