I know this is a very common issue that has been asked a million of times but after checking lots of forums, I still can't make it work... The solution that is always provided is to add the "CommonModule" and "BrowserModule" but I got those in my files and nothing changes. The weird thing is that my other file that uses *ngIf aswell works..
Here is my code :
statistics.page.html
<ion-content [fullscreen]="true">
<div class="main_block">
<p class="title">Global Statistics</p>
<div *ngIf="testsInitialized == false" class="figures_block">
<div class="figures_subblock">
<p class="text">You took</p>
<p class="figure">{{testsAmount}}</p>
<p class="text">tests in total</p>
</div>
</div>
<div *ngIf="testsInitialized" class="figures_block">
<div class="figures_subblock">
<p class="text">You took</p>
<p class="figure">{{testsAmount}}</p>
<p class="text">tests in total</p>
</div>
<div class="figures_subblock">
<p class="text">Average score of</p>
<p class="figure">{{testsAverage}}/5</p>
<p class="text">for all the tests</p>
</div>
</div>
<p class="title">Wall of shame</p>
<div class="charac_block_container" *ngIf="shameIsOn">
<div class="pepepoint_div_left">
<img src="../../assets/img/pepePoint.png">
</div>
<div class="charac_block">
<div class="block_row" *ngIf="phoneticHiraganaMistakesTable">
<div class="charac_subblock">
<p class="text">Hiragana phonetic</p>
<p class="charac">{{phoneticHiraganaMistakesTable}}</p>
</div>
<div class="counter">
<p class="figure">x{{phoneticHiraganaMistakesAmount}}</p>
</div>
</div>
<div class="block_row" *ngIf="wordHiraganaMistakesTable">
<div class="charac_subblock">
<p class="text">Hiragana word</p>
<p class="charac">{{wordHiraganaMistakesTable}}</p>
</div>
<div class="counter">
<p class="figure">x{{wordHiraganaMistakesAmount}}</p>
</div>
</div>
<div class="block_row" *ngIf="phoneticKatakanaMistakesTable">
<div class="charac_subblock">
<p class="text">Hiragana phonetic</p>
<p class="charac">{{phoneticKatakanaMistakesTable}}</p>
</div>
<div class="counter">
<p class="figure">x{{phoneticKatakanaMistakesAmount}}</p>
</div>
</div>
<div class="block_row" *ngIf="wordKatakanaMistakesTable">
<div class="charac_subblock">
<p class="text">Hiragana word</p>
<p class="charac">{{wordKatakanaMistakesTable}}</p>
</div>
<div class="counter">
<p class="figure">x{{wordKatakanaMistakesAmount}}</p>
</div>
</div>
</div>
<div class="pepepoint_div_right">
<img src="../../assets/img/pepePoint.png">
</div>
</div>
<div class="charac_block_container" *ngIf="!shameIsOn">
<div class="charac_block">
<div class="block_row">
<div class="charac_subblock">
<p class="charac">No shame yet...</p>
</div>
</div>
</div>
</div>
<ion-button (click)="clearStatsAlertConfirm()">Clear All</ion-button>
</div>
Coming soon...
</ion-content>
statistics.page.ts
import { StatsService } from './../service/stats.service';
import { AlertController, ModalController } from '@ionic/angular';
import { SettingsPage } from '../settings/settings.page';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-statistics',
templateUrl: './statistics.page.html',
styleUrls: ['./statistics.page.scss'],
})
export class StatisticsPage implements OnInit {
testsAmount: any = 0;
testsAverage: any ="-";
testsInitialized: boolean = false;
phoneticHiraganaMistakesTable: string;
wordHiraganaMistakesTable: string;
phoneticKatakanaMistakesTable: string;
wordKatakanaMistakesTable: string;
phoneticHiraganaMistakesAmount: number;
wordHiraganaMistakesAmount: number;
phoneticKatakanaMistakesAmount: number;
wordKatakanaMistakesAmount: number;
isPhoneticHiraganaMistakesTable: boolean;
isWordHiraganaMistakesTable: boolean;
isPhoneticKatakanaMistakesTable: boolean;
isWordKatakanaMistakesTable: boolean;
shameIsOn: boolean;
constructor(public statsService: StatsService, public alertController: AlertController, private modalController: ModalController) {}
removeAll(){
this.statsService.clearAll();
}
async ngOnInit() {
// some code here
}
}
statistics.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { StatisticsPageRoutingModule } from './statistics-routing.module';
import { StatisticsPage } from './statistics.page';
@NgModule({
imports: [
CommonModule,
BrowserModule,
FormsModule,
IonicModule,
StatisticsPageRoutingModule
],
declarations: [StatisticsPage]
})
export class StatisticsPageModule {}
app.module.ts
import { StatsService } from './service/stats.service';
import { NativeAudio } from '@ionic-native/native-audio/ngx';
import { Injectable, NgModule} from '@angular/core';
import { BrowserModule} from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { SuperTabsModule } from '@ionic-super-tabs/angular';
import { IonicStorageModule } from '@ionic/storage-angular';
import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
import { Drivers } from '@ionic/storage';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule,
CommonModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpClientModule,
SuperTabsModule.forRoot(),
IonicStorageModule.forRoot({
name: 'statsDB',
driverOrder: [CordovaSQLiteDriver._driver, Drivers.IndexedDB]
}),],
providers: [
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
{provide: NativeAudio, useClass: NativeAudio},
StatsService,
],
bootstrap: [AppComponent],
})
export class AppModule {}
I tried restarting the IDE aswell with no luck
StatisticsPageModule
in your app module.