diff --git a/src/app/app.component.html b/src/app/app.component.html
index 83a269739f..a562e0b675 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1,4 @@
-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 5f1726afd0..5170832e41 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,7 +1,12 @@
-import { Component, HostListener, Input, ChangeDetectionStrategy, ViewEncapsulation, OnDestroy, OnInit } from '@angular/core';
-import { Event, NavigationEnd, Router } from '@angular/router';
-
-import { TranslateService } from 'ng2-translate';
+import {
+ Component,
+ ChangeDetectionStrategy,
+ ViewEncapsulation,
+ OnDestroy,
+ OnInit
+} from "@angular/core";
+import { Router } from "@angular/router";
+import { TranslateService } from "ng2-translate";
@Component({
changeDetection: ChangeDetectionStrategy.Default,
@@ -11,14 +16,6 @@ import { TranslateService } from 'ng2-translate';
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnDestroy, OnInit {
-
- // TODO: move header and all related properties into its own component
-
- private navCollapsed: boolean;
-
- private routerSubscription: any;
-
-
private translateSubscription: any;
example: string;
@@ -26,56 +23,28 @@ export class AppComponent implements OnDestroy, OnInit {
data: any = {
greeting: 'Hello',
recipient: 'World'
- }
+ };
- constructor(public translate: TranslateService, private router: Router) {
+ constructor(
+ private translate: TranslateService,
+ private router: Router
+ ) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
-
- this.collapse();
}
ngOnInit() {
- this.routerSubscription = this.router.events.subscribe((event: Event) => {
- if (event instanceof NavigationEnd) {
- this.collapse();
- }
- });
this.translateSubscription = this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((translation: string) => {
this.example = translation;
});
}
ngOnDestroy() {
- if (this.routerSubscription) {
- this.routerSubscription.unsubscribe();
- }
if (this.translateSubscription) {
this.translateSubscription.unsubscribe();
}
}
- @HostListener('window:resize', ['$event'])
- private onResize(event): void {
- this.collapse();
- }
-
- private collapse(): void {
- this.navCollapsed = true;
- }
-
- private expand(): void {
- this.navCollapsed = false;
- }
-
- public toggle(): void {
- this.navCollapsed ? this.expand() : this.collapse();
- }
-
- public isNavBarCollaped(): boolean {
- return this.navCollapsed;
- }
-
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8defafd570..d69f5e116a 100755
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,10 +5,14 @@ import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
+import { HeaderComponent } from './header/header.component';
@NgModule({
- declarations: [AppComponent],
+ declarations: [
+ AppComponent,
+ HeaderComponent
+ ],
imports: [
SharedModule,
HomeModule,
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000000..652b12d920
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1,18 @@
+
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
new file mode 100644
index 0000000000..401e8d0620
--- /dev/null
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit, OnDestroy, HostListener } from "@angular/core";
+import { Router, NavigationEnd, Event } from "@angular/router";
+
+@Component({
+ selector: 'ds-header',
+ styleUrls: ['header.component.css'],
+ templateUrl: 'header.component.html'
+})
+export class HeaderComponent implements OnDestroy, OnInit {
+ private navCollapsed: boolean;
+ private routerSubscription: any;
+
+ constructor(
+ private router: Router
+ ) {
+ this.collapse();
+ }
+
+ ngOnInit(): void {
+ this.routerSubscription = this.router.events.subscribe((event: Event) => {
+ if (event instanceof NavigationEnd) {
+ this.collapse();
+ }
+ });
+ }
+
+ ngOnDestroy(): void {
+ if (this.routerSubscription) {
+ this.routerSubscription.unsubscribe();
+ }
+ }
+
+ @HostListener('window:resize', ['$event'])
+ private onResize(event): void {
+ this.collapse();
+ }
+
+ private collapse(): void {
+ this.navCollapsed = true;
+ }
+
+ private expand(): void {
+ this.navCollapsed = false;
+ }
+
+ public toggle(): void {
+ this.navCollapsed ? this.expand() : this.collapse();
+ }
+
+ public isNavBarCollaped(): boolean {
+ return this.navCollapsed;
+ }
+
+}