3

Consider:

<h3 style="color:#00bfff;margin:-14px 0 16px 0px" class="inline" *ng-if="data.for == 'next'">
    {{data.bannerText}}<sup><small>{{data.super}}</small></sup>
</h3>
<span class="NotinStockGrey"> {{data.textOne}} </span>
<span style="color:#00bfff"> {{data.textTWo}} </span>

Error:

zone.js:420 Unhandled Promise rejection: Template parse errors:
Can't bind to 'ng-if' since it isn't a known property of 'h3'. ("0Fb;margin:-16px 0 16px 0px">

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Gulshan Trivedi
  • 69
  • 1
  • 1
  • 2

3 Answers3

8

It's ngIf:

*ngIf="..."

(not ng-if)

You also need to add BrowserModule (AppModule) or CommonModule to imports: [] of @NgModule(...) to make it available for the components of a module.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • What is the story about `ngIf` vs. `*ngIf`? – Peter Mortensen Jul 08 '21 at 11:25
  • `*` indicates a short-form syntax (the long form is used very rarely directly) and `ngIf` is a structural directive https://angular.io/guide/structural-directives https://angular.io/guide/structural-directives#shorthand-examples – Günter Zöchbauer Jul 09 '21 at 04:28
4

You have to use *ngIf instead of *ng-if.

<h3 style="color:#00bfff;margin:-14px 0 16px 0px" class="inline" *ngIf="data.for == 'next'">{{data.bannerText}}<sup><small>{{data.super}}</small></sup></h3><span class="NotinStockGrey" > {{data.textOne}} </span><span style="color:#00bfff">{{data.textTWo}}</span>
Igor Janković
  • 5,494
  • 6
  • 32
  • 46
4

The attribute ng-if is changed in Angular 2 and later, so simply use *ngIf="whatever"

Something like the below:

<div *ngIf="userObservable | async as user; else loading">
  Hello {{user.last}}, {{user.first}}!
</div>

Or something like this:

<div *ngIf="mate">
  Hello {{ mate }}!
</div>
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Alireza
  • 100,211
  • 27
  • 269
  • 172