Having just started exploring Angular 2, I am eager to pass a boolean value from one component to another using <router-outlet>
After some research, it seems like the best approach is to utilize a service.
My aim is to toggle a boolean variable in app.component.ts from front.component.ts, triggering the expansion or collapse of a header in app.component.html.
This is my current setup:
app.component.ts:
import { Component, OnInit } from "@angular/core";
import { HeaderService } from "./header.service";
@Component({
selector: "my-app",
templateUrl: "views/app.component.html",
providers: [HeaderService]
})
export class AppComponent implements OnInit {
headerCollapsed: Boolean = false;
headerService: HeaderService;
constructor(headerService: HeaderService) {
this.headerService = headerService;
}
ngOnInit() {
var self = this;
this.headerService.headerToggle.subscribe((headerCollapsed: Boolean) => () => {
self.headerCollapsed = headerCollapsed;
});
}
}
front.component.ts:
import { Component, AfterViewInit } from "@angular/core";
import { HeaderService } from "./header.service";
@Component({
templateUrl: "views/front.component.html",
styleUrls: ["content/front.component.css"]
})
export class FrontComponent implements AfterViewInit {
headerService: HeaderService;
constructor(headerService: HeaderService) {
this.headerService = headerService;
}
ngAfterViewInit() {
this.headerService.setHeader(false);
}
}
header.service.ts:
import { Output, EventEmitter, Injectable } from "@angular/core";
@Injectable()
export class HeaderService {
@Output() headerToggle = new EventEmitter<Boolean>();
constructor() {
}
setHeader(headerCollapsed: Boolean) {
this.headerToggle.emit(headerCollapsed);
}
}
app.routing.ts:
import { ModuleWithProviders } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { FrontComponent } from "./front.component";
import { PricingComponent } from "./pricing.component";
const appRoutes: Routes = [
{ path: "", redirectTo: "front", pathMatch: "full" },
{ path: "front", component: FrontComponent },
{ path: "pricing", component: PricingComponent }
];
export const appRoutingProviders: any[] = [];
export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);
app.module.ts:
import { NgModule } from "@angular/core";
//import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
import { BrowserModule } from "@angular/platform-browser";
import { routes, appRoutingProviders } from "./app.routing";
import { AppComponent } from "./app.component";
import { FrontComponent } from "./front.component";
import { PricingComponent } from "./pricing.component";
import { AffixDirective } from "./affix.directive";
@NgModule({
imports: [
//NgbModule,
BrowserModule,
routes
],
declarations: [
AppComponent,
FrontComponent,
PricingComponent,
AffixDirective
],
providers: [
appRoutingProviders
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html:
<header [class.expanded]="!headerCollapsed" [class.collapsed]="headerCollapsed">
<div class="container">
<a href="/">
My App
</a>
</div>
</header>
<span>{{ headerCollapsed }}</span>
<router-outlet></router-outlet>
index.html:
<my-app id="app">
<div id="loader" class="container text-center">
<p>loading</p>
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
</div>
</my-app>
The issue lies in not entering:
self.headerService.headerToggle.subscribe((headerCollapsed: Boolean) => () => {
self.headerCollapsed = headerCollapsed;
});
Can someone point out where I may have gone wrong?
Given my novice status with Angular 2, I'm open to learning if there's a better way to achieve this functionality.