Helo i'm new on angular 7 and ionic 4. how do you control the variables on the dashboard page from another page?.
I have tried to make simple logic in my application. control tbFor with the setToolbar function at dashboard.page.ts from landing-in.page.ts but it doesn't work. and an error appears
(ERROR Error: Uncaught (in promise): Error: StaticInjectorError (AppModule) [LandingInPage -> DashboardPage] :).
but this problem can be lost when I try to import dashboard.page.ts to app.module.ts and add it to providers. but when I run it and I give console.log the setToolbar results in "true", but the fact is that when the page loads the value of the instance the variable tbFor is still in the value "false".
this is an example of dashboard.page.ts
import { Component, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { MenuController } from "@ionic/angular";
import { AuthService } from "../services/auth/auth.service";
@Component({
selector: "app-dashboard",
templateUrl: "./dashboard.page.html",
styleUrls: ["./dashboard.page.scss"]
})
export class DashboardPage implements OnInit {
tbFor = {
divCS: false,
divGA: false,
divTC: false
};
constructor(
public router: Router,
public menu: MenuController,
private authService: AuthService
) {
this.initializeApp();
}
initializeApp() {
this.menu.enable(true, "sideMenu");
}
setToolbar(div) {
if (div == "CS") {
this.tbFor.divCS = true;
} else if (div == "GA") {
this.tbFor.divGA = true;
} else if (div == "TC") {
//Ignores
this.tbFor.divTC = false;
}
}
clearToolbar() {
this.tbFor.divCS = false;
this.tbFor.divGA = false;
this.tbFor.divTC = false;
}
}
this is a dashboard.page.html
<ion-header>
<ion-toolbar class="ion-toolbar" color="primary">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Semua Dokumen
</ion-title>
</ion-toolbar>
<app-toolbar-cs *ngIf="tbFor.divCS"></app-toolbar-cs>
<app-toolbar-ga *ngIf="tbFor.divGA"></app-toolbar-ga>
</ion-header>
<ion-content>
<ion-list lines="none" *ngFor="let doc of docs">
<ion-item>
<img src="../../assets/img/box-skeleton.png" class="doc-icon" slot="start">
<ion-label class="doc-label" text-wrap>{{doc.title}}<br><small class="doc-date">{{doc.date}}</small></ion-label>
<ion-badge slot="end">{{doc.badge}}</ion-badge>
</ion-item>
</ion-list>
<div class="ion-tabcam">
<div class="ion-tabcam-icon">
<span class="mdi mdi-camera"></span>
</div>
</div>
</ion-content>
this is a landing-in.page.ts
import { Component, OnInit } from "@angular/core";
import { Storage } from "@ionic/storage";
import { Router } from "@angular/router";
import { AuthService } from "../services/auth/auth.service";
import { AppComponent } from "../app.component";
import { DashboardPage } from "../dashboard/dashboard.page";
@Component({
selector: "app-landing-in",
templateUrl: "./landing-in.page.html",
styleUrls: ["./landing-in.page.scss"]
})
export class LandingInPage implements OnInit {
landingLoggedButton: boolean = false;
landingSpinner: boolean = true;
constructor(
private storage: Storage,
private router: Router,
private authService: AuthService,
private appComponent: AppComponent,
private dashboard: DashboardPage
) {}
setLandingLoggedButton(value: boolean) {
this.landingLoggedButton = value;
}
setLandingSpinner(value: boolean) {
this.landingSpinner = value;
}
ngOnInit() {
this.sessionCheck();
}
delay(ms: number) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async sessionCheck() {
await this.authService.checkLoggedIn();
await this.delay(2000);
if (this.authService.isLoggedIn == true) {
this.appComponent.setSidebar(this.authService.getDivision);
this.appComponent.setAvatar(this.authService.getAvatar);
this.appComponent.setFullname(this.authService.getFullname);
this.appComponent.setEmail(this.authService.getEmail);
this.dashboard.setToolbar(this.authService.getDivision); <-- look this
this.router.navigate(["/dashboard"]);
} else {
this.landingSpinner = false;
this.landingLoggedButton = true;
}
}
}
and this is a my app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule } from "@angular/common/http";
import { RouteReuseStrategy } from "@angular/router";
import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
import { StatusBar } from "@ionic-native/status-bar/ngx";
import { AppComponent } from "./app.component";
import { MenuCsComponent } from "./components/menu/menu-cs/menu-cs.component";
import { MenuGaComponent } from "./components/menu/menu-ga/menu-ga.component";
import { MenuTcComponent } from "./components/menu/menu-tc/menu-tc.component";
import { AppRoutingModule } from "./app-routing.module";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { IonicStorageModule } from "@ionic/storage";
import { DashboardPage } from "./dashboard/dashboard.page";
@NgModule({
declarations: [
AppComponent,
MenuCsComponent,
MenuGaComponent,
MenuTcComponent
],
entryComponents: [],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot({
name: "__ionicstorage",
driverOrder: ["indexeddb", "sqlite", "websql"]
})
],
providers: [
DashboardPage,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
