I have created a checkbox list and I am trying to style the checked item with an underline. Here is my code snippet:
TS file:
currentQuarter: string;
quarters: Observable<MeseRiferimento[]>;
q1: MeseRiferimento = new MeseRiferimento();
q2: MeseRiferimento = new MeseRiferimento();
ngOnInit() {
q1.desc = "One";
q1.id = "1";
q2.desc = "Two";
q2.id = "2"
currentQuarter = q1.id;
quarters.of([q1, q2]);
}
isQuarterSelected(q: MeseRiferimento): boolean {
return this.currentQuarter === this.getKeyFromQuarter(q);
}
HTML file:
<div *ngFor="let q of quarters | async" class="col-1 my-auto m-stati">
<label class="custom-control custom-checkbox ra-check">
<input type="checkbox" class="custom-control-input" [ngClass]="{'checked': isQuarterSelected(q) }">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">{{q.descrizione}}</span>
</label>
</div>
CSS file:
.custom-control-input:checked~.custom-control-indicator {
color: #fff;
background-color: #3bb8eb;
}
Current issues in this code:
1. The default checked checkbox appears correctly with the 'checked' class but the CSS is not applied upon page load, thus it's not underlined
2. When manually selecting a checkbox, the 'checked' class applies and the CSS works appropriately
3. However, when switching from one checkbox to another, the 'checked' class updates correctly but the CSS for the previous checkbox does not update, leaving the previous checkbox underlined
Any advice would be appreciated. Thank you.