Using mat-toolbar.

e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Hello, Guest!');
+    expect(page.getTitleText()).toEqual('HPC Pack 2019');
   });
 
   afterEach(async () => {

e2e/src/app.po.ts

@@ -6,6 +6,6 @@ export class AppPage {
   }
 
   getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+    return element(by.css('mat-toolbar .title')).getText() as Promise<string>;
   }
 }

src/app/app.component.html

@@ -1,5 +1,8 @@
-<h1>Hello, {{username}}!</h1>
-<p *ngIf="authenticated">
-  <a mat-flat-button color="primary" (click)="logout()">Log out</a>
-</p>
+<mat-toolbar color="primary">
+  <span class="title">HPC Pack 2019</span>
+  <span class="toolbar-spacer"></span>
+  <span *ngIf="authenticated" class="item">{{username}}</span>
+  <a *ngIf="authenticated" class="item" mat-flat-button (click)="logout()">Log out</a>
+</mat-toolbar>
+
 <router-outlet></router-outlet>

src/app/app.component.scss

@@ -0,0 +1,11 @@
+mat-toolbar {
+  margin-bottom: 1em;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.item {
+  margin-left: 1em;
+}

src/app/app.component.spec.ts

@@ -1,6 +1,7 @@
 import { TestBed, async } from '@angular/core/testing';
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
+import { MaterialModule } from './material.module'
 import { AppComponent } from './app.component';
 import { AuthService } from './auth.service';
 
@@ -10,6 +11,9 @@ class RouterOutletStubComponent {}
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
+      imports: [
+        MaterialModule,
+      ],
       declarations: [
         RouterOutletStubComponent,
         AppComponent

src/app/material.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatButtonModule } from '@angular/material/button';
@@ -6,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
   exports: [
+    MatToolbarModule,
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,