title: Class bindings in Angular not working properly
body: <p>I'm trying to assign two classes to a table row based on specific conditions, but the wrong classes gets assigned to the wrong tr's.</p>
  
  <p>My list.component.html:</p>
  
  <pre><code>div class="country_box" *ngIf="cases"&gt;
    &lt;div class="container"&gt;
      &lt;input
        type="text"
        class="form-control-sm"
        name="search"
        [(ngModel)]="search"
        autocomplete="off"
        placeholder="Search by Country Name"
      /&gt;
    &lt;/div&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;
          &lt;h3&gt;&lt;strong&gt;Country Name: &lt;/strong&gt;&lt;/h3&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;h3&gt;&lt;strong&gt;Cases: &lt;/strong&gt;&lt;/h3&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;h3&gt;&lt;strong&gt;Deaths: &lt;/strong&gt;&lt;/h3&gt;
        &lt;/th&gt;
        &lt;th&gt;
          &lt;h3&gt;&lt;strong&gt;Recovered: &lt;/strong&gt;&lt;/h3&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr
        *ngFor="let country of cases[1].countries_stat | filter: search"
        [ngClass]="setClass(country)"
      &gt;
        &lt;td&gt;{{ country.country_name }}&lt;/td&gt;
        &lt;td&gt;{{ country.cases }}&lt;/td&gt;
        &lt;td&gt;{{ country.deaths }}&lt;/td&gt;
        &lt;td&gt;{{ country.total_recovered }}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My list.component.ts: </p>
  
  <pre><code>setClass(stats) {
  //console.log(stats.deaths);
  let myClass = {
    negative: stats.deaths &gt; stats.total_recovered,
    positive: stats.deaths &lt; stats.total_recovered,
  };
  return myClass;
  </code></pre>
  
  <p>}</p>
  
  <p>and finally my list.component.css:</p>
  
  <pre><code>    .positive {
    background-color: red;
    color: #fafafa;
  }
  
  .negative {
    background-color: green;
    color: #fafafa;
  }
  </code></pre>
  
  <p>I would appreciate any help, thank you!</p>