CODEWITHSUNDEEP
cssangularsassangular2-templateng-class
joeCarpenter
joeCarpenter

Reputation: 1535

ngClass in Angular 2 not rendering in table

I currently have a <table> in my template and need to apply styling in different parts (row, cell), I'm reading from a css file. Everything was working fine when I only used the file style for styling the <td> elements, now I wanted to incorporate a class to style my table and things are not rendering, can someone take a look? Thank you!

Now (not working for <table> and <tr>):

    <div>

<table [ngClass] = "'component'"> <!-- width ="100px;"-->
<tr [ngClass] = "'row'">  <!-- width ="100px;" height = "6px;"-->

<td [ngClass] = "{'weak' : weak, 'neutral' : !weak}"></td>
<td [ngClass] = "{'moderate' : moderate,'neutral' : !moderate  }" ></td>
<td [ngClass] = "{'strong' : strong, 'neutral' : !strong }" ></td>
</tr>

</table>
</div>

When I use this it works:

 <table width ="100px;">
    <tr width ="100px;" height = "6px>

Update (adding scss):

.component{

    width : "6.250em";
    position: relative
}
.row{
     width : "6.250em";
     height : ".375em"

}

Upvotes: 1

Views: 1159

Answers (1)

micronyks
micronyks

Reputation: 55443

Changed it to,

<table [ngClass] = "{'component':true}"> <!-- width ="100px;"-->
      <tr [ngClass] = "{'row':true}">  <!-- width ="100px;" height = "6px;"-->

        ...
      </tr>

</table>

OR

<table [class.component] = "true"> <!-- width ="100px;"-->
      <tr  [class.row] = "true">  <!-- width ="100px;" height = "6px;"-->

        ...
      </tr>

</table>

Upvotes: 3

Related Questions