CODEWITHSUNDEEP
angularionic-frameworkpopoverion-select
xne2687
xne2687

Reputation: 33

Change properties of div inside an ion-select-option

i would like to add some small circles next to the ion-select-option lines with the attribute "< div >". I tried several options but nothing of them worked as expected. Hope someone can help.

  <div class="eventSelect">
<ion-select
  interface="popover"
  placeholder="Select Event"
  id="popover-bottom"
  (ionChange)="loadSelectedEvent($event)"
>
  <ion-select-option
    class="my-select-option"
    *ngFor="let item of user_events"
    value="{{item.id}}"
  >
    <div
      *ngIf="item.isActive === true"
      slot="start"
      class="circleBase circle1"
    >
      true &nbsp;
    </div>
    <div
      *ngIf="item.isActive === false"
      slot="start"
      class="circleBase circle1"
    >
      false &nbsp;
    </div>
    <ion-label>{{item.beginDate}} -</ion-label>
    <ion-label> {{item.eventName}} </ion-label>
  </ion-select-option>
</ion-select>
</div>

I would like to have a red or green circle instead of the boolean values

Interface View

Upvotes: 0

Views: 596

Answers (2)

xne2687
xne2687

Reputation: 33

thanks for your support, sorry i forgot to mentiod my css-file, it looks similar to yours and this is the point, i can see the boolean values, but my changes of the properties has no impact(see red mark). I´m using the "ion-select" as an popover and inside the inspector i can see that there is an ion-popover (see yellow mark) attribute where i have to add the < div > Attribute, but i dont know how. I manually inserted a < div> attribute at the < ion- item> of the < ion-popover> and it works (see green mark)

enter image description here

Upvotes: 0

Diego Bascans
Diego Bascans

Reputation: 1149

You have to add some css to your code in order to achieve that.

.circleBase {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.red{
  background-color: red;
}

.green {
  background-color: green;
}

And your html should look like this.

<ion-select-option class="my-select-option" *ngFor="let item of user_events" value="{{item.id}}">
  <div *ngIf="item.isActive" slot="start" class="circleBase green"></div>
  <div *ngIf="!item.isActive" slot="start" class="circleBase red"></div>
  <ion-label>{{item.beginDate}} -</ion-label>
  <ion-label> {{item.eventName}} </ion-label>
</ion-select-option>

Upvotes: 0

Related Questions