I recently implemented a custom rating bar in Angular, which worked perfectly fine in a basic component. However, when I tried to move it to a MatDialog component, I encountered some issues.
In the initial setup, my input was set to display: none so that the radio button could be checked by clicking on the label (which worked well in simple components).
But in the MatDialog component, I can no longer check it on label click. Did I miss something? What could be causing this problem?
Thank you in advance for any insights!
Here is my app-new-review-modal.html:
<mat-dialog-content>
<form [formGroup]="rate">
<div class="rating" > ;
<input type="radio" value="5" name="rateStar" id="star5" formControlName="rateStar">
<label for="star5"></label>
<input type="radio" value="4" name="rateStar" id="star4" formControlName="rateStar">
<label for="star4"></label>
<input type="radio" value="3" name="rateStar" id="star3" formControlName="rateStar">
<label for="star3"></label>
<input type="radio" value="2" name="rateStar" id="star2" formControlName="rateStar">
<label for="star2"></label>
<input type="radio" value="1" name="rateStar" id="star1" formControlName="rateStar">
<label for="star1"></label>
</div>
</form>
</mat-dialog-content>
This is my controller:
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-new-review-modal',
templateUrl: './new-review-modal.component.html',
styleUrls: ['./new-review-modal.component.scss']
})
export class NewReviewModalComponent implements OnInit {
rate: FormGroup;
constructor(private fb: FormBuilder) {
})
}
ngOnInit(): void {
this.rate = this.fb.group({
rateStar: []
});
}
}
If needed, here is the CSS:
.rating {
width: 155px;
display: flex;
justify-content: space-between;
font-size: 20px;
direction: rtl;
label {
float: right;
cursor: pointer;
color: #676767;
&:before {
content: "\2605";
}
}
input {
display: none;
}
input:checked ~ label,
label:hover ~ label,
label:hover {
color: rgb(120, 140, 116);
}
}