NG0303: Encountering an issue with binding to 'ng-If' as it is not recognized as a valid property of 'app-grocery'. A similar problem was found here but did not provide a solution
Despite importing CommonModule in app.modules.ts, I am still receiving the same error.
Below are the relevant 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 { }