I'm attempting to add a tick mark before a specific default item in the option dropdown of my Angular application. The item in question is named Steven, as shown in this example. How can I make this happen?
For some reason, it doesn't seem to be working.
To demonstrate the issue, I've created a StackBlitz: https://stackblitz.com/edit/angular-ivy-qac8ae?file=src/app/app.component.html
Here is the markup:
<form [formGroup]="form">
<div class="wrapper">
<div class="select-wrapper-row">
<select formControlName="name">
<option value="">-- Select an option --</option>
<option
*ngFor="let item of nameList$ | async"
[ngClass]="{ checkmark: item.isAlive == true }"
[selected]="item.isAlive"
>
{{ item.name }}
</option>
</select>
</div>
</div>
</form>
And here's the CSS:
.checkmark:before {
content: 'L';
font-family: arial;
-ms-transform: scaleX(-1) rotate(-35deg); /* IE 9 */
-webkit-transform: scaleX(-1) rotate(-35deg); /* Chrome, Safari, Opera */
transform: scaleX(-1) rotate(-35deg);
display: inline-block;
vertical-align: top;
line-height: 1em;
width: 1em;
color: white;
height: 1em;
margin-right: 0.6em;
text-align: center;
position: absolute;
right: 0;
}