I am currently utilizing Angular 9.
and I am faced with a scenario where I need to load dynamic components
Within one of my components, I encountered the following warning
core.js:12853 Can't bind to 'ngIf' since it isn't a known property of 'div'
I have already imported commonModule in my app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker'
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CommonModule } from '@angular/common';
// Module imports
import { ServeMonstaAuthenticationRoutingModule } from './serve-monsta-authentication/serve-monsta-authentication-routing.module'
import { ServeMonstaAuthenticationModule } from './serve-monsta-authentication/serve-monsta-authentication.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
// Services imports
import { UserLoginService } from './serve-monsta-authentication/services/user-login/user-login.service';
import { UserSignupService } from './serve-monsta-authentication/services/user-signup/user-signup.service';
import { SurveyService } from '../services/survey/survey.service';
// Component imports
// Add your component imports here
@NgModule({
declarations: [
// Add your component declarations here
],
imports: [
BrowserModule,
CommonModule,
FormsModule,
AppRoutingModule,
ServeMonstaAuthenticationModule,
ServeMonstaAuthenticationRoutingModule,
BrowserAnimationsModule,
RouterModule,
BsDatepickerModule.forRoot(),
],
entryComponents:[
// Add your entry components here
],
providers: [
// Add your providers here
],
bootstrap: [AppComponent]
})
export class AppModule { }
Below is the component where I am using ngIf
import { Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Field } from '../../../core/question/field';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-radio',
template: `
<!-- Your template code goes here -->
`,
styles: [],
})
export class RadioComponent implements OnInit {
field: Field;
group: FormGroup;
constructor() {}
ngOnInit(): void {
console.log("Hey I am Radio :: ", this.field)
}
}
Here is the object(response) received in the above component
// Your response object details go hereIf you have any suggestions, please feel free to share. I have already included CommonModule and tried using an extra boolean variable, but the issue persists.