Angular interpolation using "ngIf"

user_13820897 0
Viewed 96

I have a table in which I want the first column to take a specific color according to a variable in my class. For example, I have a class DisplayProject.ts which has an attribute called indexOfColor

DisplayProject.ts

export class DispalyProject implements OnInit {
  ngOnInit(): void {
  }

  project: Project;
  indexOfColor: number = 1; // can be 2 

  constructor () {
  }
}

DisplayProject.html

<table>
  <thead>
    <tr>
      <th>the project name</th>
      <th>the project date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>project.name</td>
      <td>project.date</td>
    </tr>
  </tbody>
</table>

I want the column "the project name" to be green if indexOfColor = 1 and be blue if indexOfColor = 2

Any solutions ?

angular typescript css html
4 Answers

You can use ngStyle to implement specific styles based on variables.

<th [ngStyle]="{ 'background-color': indexOfColor == 1 ? 'green' : 'blue' }">
  the project name
</th>
user_82028500

Component:

@Component({ selector: 'app-comp', ... })
export class DispalyProject {
  @Input() public project: Project;
  @Input() public indexOfColor: 1 | 2 = 1; //can be 2
}

SCSS stylesheet:

.default-color {
  color: green;
}
.blue {
  color: blue;
}

Template:

<table>
  <thead>
    <tr>
     <th class="default-color" [ngClass]="{ blue: indexOfColor === 2 }">
       the project name
     </th>
     <th>
       the project date
     </th>
    </tr>
  </thead>
  <tbody>
   <tr>
     <td>project.name</td>
     <td>project.date</td>
   </tr>
  </tbody>
</table>
user_58800170

If you're using class you can do:

SCSS

.color-green {
  color: green;
}

.color-blue {
  color: blue;
}

Template:

<th [ngClass]="{
    'color-green': indexOfColor === 1
    'color-blue': indexOfColor === 2
    }">
    the project name
</th>

In this case if one day you want to add another condition, you just have to add one line

user_86551720 
<th [style.background]="{ indexOfColor == 1 ? 'green' : {indexOfColor == 2 ? 'blue' :'black'}">
</th>

Reference from Binding value to style

user_57067560
Related