-3

NG0303: Can't bind to 'ng-If' since it isn't a known property of 'app-grocery'. It looks similar to this but didn't solved my problem

Getting the same error even though I imported CommonModule in app.modules.ts

Here are my files

app.component.html

<app-header (selectedFeature)="onNavigate($event)"></app-header>
<div class="container">
  <div class="row">
    <div class="col-md-12" >
      <app-dishes *ng-If = "loadedFeature === 'dish'"></app-dishes>
      <app-grocery *ng-If = "loadedFeature === '!dish'"></app-grocery>
    </div>
  </div>
</div>

app.modules.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';
// imported other components as well

@NgModule({
  declarations: [
    AppComponent,
 //Added other component as well
  ],
  imports: [
    FormsModule,
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Mohd Abdul Raheem
  • 11
  • 3

1 Answers1

1

ng-if is used in AngularJS in Angular it's *ngIf

log10
  • 54
  • 2