title: Conditional CSS Class
body: <p>I am using Ionic 2, and have the following html code:</p>
  
  <pre><code>&lt;ion-content padding class="messages-page-content"&gt;
      &lt;ion-scroll scrollY="true" class="messages"&gt;
          &lt;ion-list&gt;
              &lt;ion-item class="message-item" *ngFor="let item of firelist | async"&gt;
                  &lt;div [class]="'message message-me'"&gt;
                      &lt;div class="message-content"&gt;{{item.message_text}}&lt;/div&gt;
                      &lt;span class="time-tick"&gt;
                          &lt;span class="message-timestamp"&gt;{{item.timestamp | amDateFormat: 'DD MMM YYYY  h:mm a'}}&lt;/span&gt;
                          &lt;div *ngIf="showTick(message) === true"&gt;
                              &lt;span class="checkmark"&gt;
                                  &lt;div class="checkmark_stem"&gt;&lt;/div&gt;
                                  &lt;div class="checkmark_kick"&gt;&lt;/div&gt;
                              &lt;/span&gt;    
                          &lt;/div&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/ion-item&gt;
          &lt;/ion-list&gt;
      &lt;/ion-scroll&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>If you look at this line in particular:</p>
  
  <pre><code>&lt;div [class]="'message message-me'"&gt;
  </code></pre>
  
  <p>I would like to be able to dynamically change the class.</p>
  
  <p>For example, something like this, but I cannot get this to work:</p>
  
  <pre><code>&lt;div [class]="{{item.memberId === me.memberId ? 'message message-me' : 'message message-you'}}"&gt;
  </code></pre>
  
  <p>Where <code>me</code> is defined in the supporting <code>ts</code> file.</p>
  
  <p>Any advise welcome.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Based on the advise below outlined <a href="https://stackoverflow.com/questions/41279830/change-classes-conditionally-ionic2">here</a>, I try the following:</p>
  
  <pre><code>    &lt;div [class]="{'message message-me' : (item.uid == me.uid), 'message message-you':(item.uid === you.uid)}"&gt;
  </code></pre>
  
  <p>Now, I just lose all my formatting but no errors. Objects <code>item.uid</code> and <code>me.uid</code> do exist. </p>
  
  <p><a href="https://i.stack.imgur.com/GWaEo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GWaEo.png" alt="enter image description here"></a></p>
  
  <p>Original code:</p>
  
  <pre><code>&lt;div [class]="'message message-me'"&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JR85H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JR85H.png" alt="enter image description here"></a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>The following kind of works:</p>
  
  <pre><code>&lt;div [ngClass]="{'message message-you':(item.uid === you.uid), 'message message-me':(item.uid === me.uid)}"&gt;
  </code></pre>
  
  <p>I have a list where both conditions are met, but only the right hand condition is applying the style.  If I swap the left and right conditions around, the other style works, so this suggests nothing is wrong with the data, but rather the html.</p>
  
  <p><a href="https://i.stack.imgur.com/0y5r4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0y5r4.png" alt="enter image description here"></a></p>
  
  <p>If I change it to:</p>
  
  <pre><code>&lt;div [ngClass]="{'message message-me':(item.uid === me.uid), 'message message-you':(item.uid === you.uid)}"&gt;
  </code></pre>
  
  <p>I get:</p>
  
  <p><a href="https://i.stack.imgur.com/g0CRS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/g0CRS.png" alt="enter image description here"></a></p>
  
  <p>I also try:</p>
  
  <pre><code>    &lt;div [ngClass]="{'message message-me':(item.uid != you.uid), 'message message-you':(item.uid === you.uid)}"&gt;
  </code></pre>
  
  <p>To prove it's not a problem with the data, but only the right hand class is ever applied.</p>