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">
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.
ngIf vs. *ngIf?* indicates a short-form syntax (the long form is used very rarely directly) and ngIf is a structural directive angular.io/guide/structural-directives angular.io/guide/structural-directives#shorthand-examplesYou 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> 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> 