CODEWITHSUNDEEP
angulartypescript
user9515832
user9515832

Reputation:

how do I change a color cell of the table on Typescript when using *ngFor

I have this image:

image

What I'm trying to do is, the cells have different colors. main action=1 green and action=0 red color.

I have this html code:

  <div class="row" colum>
    <div class="grid-container">
      <table *ngFor="let item of notification">
        <tr style="text-align:center">
          <ul> {{item.alarmdesc}}</ul>
          <ul> {{getProductName(item.device_serial)}}</ul>
          <ul> {{item.datetime_device | date:'d/MM/yyyy'}}</ul>
          <ul>
            <button style="border-style: groove; 
          width:70%; 
          height:30%; 
          margin: 15%;
          border: 1px solid rgb(198, 199, 198);
          padding: 10px;cursor: pointer;" (click)="OnAced(item.id)">main action: {{item.acted}}
        </button> 
        </ul>
        </tr>
      </table>
    </div>
  </div>

Upvotes: 0

Views: 2428

Answers (2)

HMarteau
HMarteau

Reputation: 654

You can try the conditional operator like that if action is in your item 

<div [style.border-color]="item.action == 1 ? 'green' : 'red' "></div>

Upvotes: 1

Matthias Cruciani
Matthias Cruciani

Reputation: 9

First of all, using inline styling is a bad practice, you should use the css file related to the component.

You could do something like this:

css file:

.cell {
   text-align: center;
}

.green {
   color: "green";
}

component file:

isGreen(main): boolean {
  return main === 1
}

Then you could attach the css class to the element like this:

<tr class="cell" [class.green]="isGreen(main)"></tr>

Upvotes: 1

Related Questions