moved header to its own component

src/app/app.component.html

@@ -1,21 +1,4 @@
-<header>
-  <nav class="navbar navbar-dark bg-inverse">
-    <button class="navbar-toggler hidden-sm-up" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
-      <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
-    </button>
-    <div [ngClass]="{'clearfix': !isNavBarCollaped()}">
-      <a class="navbar-brand" routerLink="/home">
-        <!-- TODO: add logo here -->{{ 'title' | translate }}</a>
-    </div>
-    <div [ngbCollapse]="isNavBarCollaped()" class="collapse navbar-toggleable-xs" id="collapsingNav">
-      <ul class="nav navbar-nav">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="/home" routerLinkActive="active"><i class="fa fa-home fa-fw" aria-hidden="true"></i> {{ 'nav.home' | translate }}<span class="sr-only">(current)</span></a>
-        </li>
-      </ul>
-    </div>
-  </nav>
-</header>
+<ds-header></ds-header>
 
 <div class="container-fluid">
   <main>

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;
-  }
-
 }

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,

src/app/header/header.component.html

@@ -0,0 +1,18 @@
+<header>
+  <nav class="navbar navbar-dark bg-inverse">
+    <button class="navbar-toggler hidden-sm-up" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
+      <i class="fa fa-bars fa-fw" aria-hidden="true"></i>
+    </button>
+    <div [ngClass]="{'clearfix': !isNavBarCollaped()}">
+      <a class="navbar-brand" routerLink="/home">
+        <!-- TODO: add logo here -->{{ 'title' | translate }}</a>
+    </div>
+    <div [ngbCollapse]="isNavBarCollaped()" class="collapse navbar-toggleable-xs" id="collapsingNav">
+      <ul class="nav navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" routerLink="/home" routerLinkActive="active"><i class="fa fa-home fa-fw" aria-hidden="true"></i> {{ 'nav.home' | translate }}<span class="sr-only">(current)</span></a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</header>

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;
+  }
+
+}