title: Syntax for NgClass if/else with string
body: <p>I've been trying to do something very simple:</p>
  
  <p>I've got a variable in my component called <code>sortedBySize</code>. <code>sortedBySize</code> can either equal <code>""</code> (empty), <code>"asc"</code> or <code>"desc"</code>.</p>
  
  <p>in my HTML I'm trying to make a conditional NgClass statement. I've tried many different ways but I can never get it to work. Here's my syntax:</p>
  
  <pre><code>&lt;Label ng-class="{ sortSelected: sortedBySize === '', sortNotSelected: sortedBySize !== '' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Not sorted'" (tap)="somefunction()"&gt;&lt;/Label&gt;
  &lt;Label ng-class="{ sortSelected: sortedBySize === 'asc', sortNotSelected: sortedBySize !== 'asc' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Asc'" (tap)="somefunction()"&gt;&lt;/Label&gt;
  &lt;Label ng-class="{ sortSelected: sortedBySize === 'desc', sortNotSelected: sortedBySize !== 'desc' }" style="margin-left:1;" class="text-center" width="33%" [text]="'Desc'" (tap)="someFunction()"&gt;&lt;/Label&gt;
  </code></pre>
  
  <p>for good measure, my css:</p>
  
  <pre><code>.sortSelected {
    background-color: green;
  }
  
  .sortNotSelected {
    background-color: red;
  }
  </code></pre>
  
  <p>I've changed up the ternary statement in as many ways I could think of, but it's just not working and I don't know why. The classes work fine when statically added to the regular <code>class</code>. Any help would be greatly appreciated.</p>
  
  <p>Thanks.</p>