-4

I have a list of users and I need to create badge circle(green/red) on each user in angular, for active user there is circle green light , and for inactive user there is circle red light .. thanks

Asma Alghamdi
  • 7
  • 5
  • not clear what you are trying to do. what is `green` and `red`? is it background color of an element? Please add more description that tells clearly you are trying to do. – critrange Aug 12 '20 at 13:32
  • thanks yash for replay, I mean for active user there is green circle light , and for inactive user there is red circle light , now I have 'on' 'off' word for each one , I need to make front-end when it is on the circle light is green , and when it is off the circle light is red – Asma Alghamdi Aug 12 '20 at 13:37
  • so you are displaying a list of users and want to show a badge circle(green/red) on each user? – critrange Aug 12 '20 at 13:38
  • yes exactly ,,, – Asma Alghamdi Aug 12 '20 at 13:39
  • it will be helpful if you add your angular component. for example, how do you save the user on frontend and how the object looks like, etc – critrange Aug 12 '20 at 13:40
  • @AsmaAlghamdi may be you want to apply `ngClass` here. based on the input change the class to `active` and `inactive` ,and add css for for both `.active` and `.inactive` classes. – programoholic Aug 12 '20 at 13:41

2 Answers2

1

Here is how you can generate the status dynamically:

<li *ngFor="let user of users">
        <span class="dot" [ngClass]="{'active': (user.status==='on'), 'inactive':(user.status === 'off')}"></span>
        {{user.name}}
      </li>

Here is the working example : Stackblitz Example

programoholic
  • 4,830
  • 5
  • 20
  • 59
0

Use font awesome. Then use angular directive for setting classes. Something like:

  <i class="fas fa-power-off" [class.on]=”isOn” (click)=“onClick()></i>

Css

 i{color:red;}   i.on{color:green}

Typescript

  on=false;
  onClick():void{
       this.on=!this.on;
   }
Jens Alenius
  • 1,931
  • 2
  • 16
  • 20
  • thank you very much jens , I added what you mentioned , I have one question how to integrated to backend , this {{user.active_status}} returns on or off word for each user , how integrated with your code ? – Asma Alghamdi Aug 12 '20 at 13:56
  • Do you have a callback method from the server. Whet this.user is set? I’m that method you can add. this.on=user.active_status. If you need to toggle the value in the server you will need to add a post in the onClick method and remove this.on and only user user.active_status – Jens Alenius Aug 12 '20 at 14:07
  • Please mark it as answer if you want – Jens Alenius Aug 12 '20 at 16:05