I am trying to apply a tickmark before a default item in the option dropdown of my angular application. Its the name steven as shown in this example. How do I achieve that

For some reason it does not seem to apply

I have created a stackblitz to reproduce the issue https://stackblitz.com/edit/angular-ivy-qac8ae?file=src/app/app.component.html

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>

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;
}

CodePudding user response：

::before and ::after are pseudo-elements that actually append a child node to the element, so they will not work on any element that cannot contain child nodes - I.E. option.

You could alternatively use a component such as ng-select, that has this functionality built-in.

CodePudding user response：

I couldn't get your stackblitz running.

Error in ~/src/main.ts
ngcc failed to run on @angular/[email protected].

But the solution can be demonstrated using simple html snippet:

body {
  width: 50vw;
}

div {
  border-bottom: 1px dotted green;
}

.checkmark {
  /* without this checkmark will not be 
      placed relative to the item */
  position: relative;
}

.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;
  /* unless your background is dark don't use white as text color */
  color: white;
  height: 1em;
  margin-right: 0.6em;
  text-align: center;
  /* if you want it on left side then remove this*/
  position: absolute;
  right: 0;
}

.change1::before {
  color: green;
}

.change2::before {
  position: static;
}

.checkmarkFixed: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: green;
  height: 1em;
  margin-right: 0.6em;
  text-align: center;
}

<div class='checkmark'>Your code: not working</div>
<div class='checkmark change1'>Correction 1</div>
<div class='checkmark change1 change2'>Correction 2</div>
<div class='checkmarkFixed'>Fixed</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

• you are choosing white as color for thickmark. Unless the background is dark it won't be visible.
• if you want it on left of the item then don't use position:absolute.
• if you use position:absolute then add .checkmark rule as shown above.

I have deliberately created separate .change1 and .change2 classes to show you what can be changed to fixe the issue. You can have these changes in one single rule like .checkmarkFixed:before