The issue you're facing is connected to utilizing *ngIf and importing CommonModule. In Angular, there's no need to explicitly import CommonModule in your component file as it gets automatically included in the AppModule when you create a new Angular project.
To resolve this problem, here's what you can do:
Delete the line import { CommonModule } from your component file (component.ts) since it's unnecessary there.
Ensure that you have imported CommonModule in your AppModule where it is required for using directives like *ngIf:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'; // Include CommonModule here
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CommonModule, // Add CommonModule to your imports here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- After removing the import of
CommonModule from your component file and adding it to your AppModule, your *ngIf directive should function correctly in your component's template:
<div *ngIf="index.rate > 0; else down" class="col-6">
<p class="text-green-500 pi pi-arrow-up">{{ index.rate }}</p>
</div>
<ng-template #down>
<div class="col-6">
<p class="text-red-500 pi pi-arrow-up">{{ index.rate }}</p>
</div>
</ng-template>
By following these instructions, you should be able to utilize *ngIf seamlessly in your Angular component.