*ngIf=item.activityStatus!=("Done") as angular2 conditional visibility

Question

I want to toggle the visibility of a button based of a value of an item

Here is my code:

 <tbody>
              <tr *ngFor="let item of statusConfig | slice:0:9; let i = index;" >
                  <td class="col-md-1">
                    {{item.id}}
                  </td>
                  <td class="col-md-3">
                    {{item.activityName}}
                  </td>
                  <td class="col-md-2">
                    {{item.activityStatus}}
                  </td>
                  <td class="col-md-3">
                    {{item.activityDateEpoch | date: 'yyyy-MM-dd HH:mm:ss'}}
                  </td>
                  <td class="col-md-3">
                    <button *ngIf=item.activityStatus!=("Done") type="button" class="btn btn-primary" (click)="saveStatus(item.id, i)">Mark as done</button>
                  </td>

              </tr>
            </tbody>

why is this a syntax error and how should I fix this?

directive_normalizer.js:82 Uncaught Error: Template parse errors:
Unexpected closing tag "button" ("tyStatus!="Done" type="button" class="btn btn-primary" (click)="saveStatus(item.id, i)">Mark as done[ERROR ->]</button>
                  </td>

"): ReportComponent@45:145

and

activityStatus = "Done" for now

Answer 1

I'm in shock how many mistakes you managed to make in one line of code. :-)

First: NgIf directive accepts string as expression value, which means it has to have the following form:

*ngIf="expression here"

Second: You can't use " two times, if you want to use string in ", you should use single quotes then (')

Third: Brackets are not needed: ("Done")

Anyway, your expression should look like this:

*ngIf="item.activityStatus != 'Done'"

You can read more about NgIf directive here.

Answer 2

It should be,

*ngIf="(item.activityStatus!='Done')"