title: Angular [class] binding not working on Component initialization
body: <p>I've got an Angular Component with a <code>sortBy</code> property that can have one of three values. The <code>changeSort</code> function sets the value, which applies the class <code>active</code> to one of three list items:</p>
  
  <pre><code>  &lt;ul&gt;
       &lt;li role="button" [class.active]="sortBy === 'newest'" id="newest" (click)="changeSort($event)"&gt;Newest&lt;/li&gt;
       &lt;li role="button" [class.active]="sortBy === 'oldest'" id="oldest" (click)="changeSort($event)"&gt;Oldest&lt;/li&gt;
       &lt;li role="button" [class.active]="sortBy === 'alpha'"  id="alpha"  (click)="changeSort($event)"&gt;Alphabetical&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>This all works fine. What's not working is that the class is not being applied when the component is initialized. I've tried setting <code>sortBy</code> in <code>ngOnInit</code> and in <code>ngAfterViewInit</code> and neither causes the class to be applied.</p>