title: angular 5 - Conditional CSS application - is there a simpler way?
body: <p>I am taking in JSON data and generating a material list from them with <code>mat-list</code> using the <code>*ngFor</code> directive.</p>
  
  <p>I have also researched and found that using <code>[NgClass] = "{'CssClassName': condition}"</code> enables me to apply different CSS classes to each list entry 
   depending on any value of my choosing within the data itself.</p>
  
  <p>However... I am changing the background style of each entry depending on their ID number, and I have 10 IDs making this <code>NgClass</code> section within the HTML rather long and difficult to read as you are not able to split this onto different lines...</p>
  
  <p><em>You can see below how long the actual line of code is - of course the text does wrap in my editor, but it still look horrendous - <a href="https://stackblitz.com/edit/conditional-css-on-json-data" rel="nofollow noreferrer">Full code example</a></em></p>
  
  <pre><code>&lt;mat-chip class="list-item" [ngClass] = "{'one':r.id === 1, 'two':r.id === 2,'three':r.id === 3, 'four':r.id === 4,'five':r.id === 5, 'six':r.id === 6,'seven':r.id === 7, 'eight':r.id === 8, 'nine':r.id === 9, 'ten':r.id === 10}"&gt;
  </code></pre>
  
  <p>Is there a more elegant way of achieving the same outcome that I am unaware of?</p>