title: Angular2 - *ngIf on string interpolated value fetched from web service
body: <p>I have to display two mutually exclusive buttons 'MARK COMPLETED' and 'COMPLETED'. If the task status is OPEN then 'MARK COMPLETED' needs to display, whereas if the task status is closed then 'COMPLETED' button needs to display. </p>
  
  <pre><code>&lt;div *ngFor="#task of tasks" class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop"&gt;
      &lt;div class="mdl-card__title mdl-card--expand mdl-color--teal-300"&gt;
      &lt;h2 class="mdl-card__title-text"&gt;{{task.taskname}}&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="mdl-card__supporting-text mdl-color-text--grey-600"&gt;
      {{task.taskdesc}}  {{task.taskstatus}}
      &lt;/div&gt;
      &lt;div class="mdl-card__actions mdl-card--border"&gt;                
                  &lt;a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect"&gt;{{task.assignedto}}&lt;/a&gt;
  
  
      &lt;a [routerLink]="['/AllTasks']" *ngIf="{{task.taskstatus}}='OPEN'" class="mdl-button mdl-js-button mdl-js-ripple-effect" (click)="onClickMark(task)"&gt;Mark Completed&lt;/a&gt;
      &lt;a [routerLink]="['/CompletedTasks']" *ngIf="{{task.taskstatus}}='CLOSED'" class="mdl-button mdl-js-button mdl-js-ripple-effect"&gt;Completed&lt;/a&gt;
  
  
  &lt;/div&gt;    
  </code></pre>
  
  <p>I tried <code>*ngIf="{{task.taskstatus}}='OPEN'"</code> , but it's   not working. Any ideas ?  </p>