@uoh/header

University of Haifa Header

In order to install this library properly you need the following configurations:

1. Add @angular/material and the material icons font in the index.html file
2. Include the library assets to the angular.json file to import the header logo
3. Include the uoh-core and uoh-layout mixins from @uoh/theme
4. Include the uoh-header theme in your styles.scss
5. Import the HeaderModule
6. Usage

Add material icons font

First, install angular material. Secondly, add the following tag to the head section of your index.html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Include the library assets

Add the following line to the assets array under both the build and the test sections in the angular.json file:

{ "glob": "**/*", "input": "./node_modules/@uoh/header/assets", "output": "./assets" }

For example:

 {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/huheader-app",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "src/tsconfig.app.json",
      "assets": [
        "src/favicon.ico",
        "src/assets",
        { "glob": "**/*", "input": "./dist/uoh/header/assets", "output": "./assets" }
      ],
      "styles": ["src/styles.scss"],
      "scripts": []
    }
  }

Include uoh theme: core & layout

Install @uoh/theme.

Follow the instructions in the above link in order to include both the uoh-core and the uoh-layout theme mixins in your styles.scss

Include the library theme

Import the _header.theme.scss file and include the uoh-header mixin in your styles.scss:

@import '~@uoh/header/header.theme';

@include uoh-header($default-theme);

.dark-theme {
  @include uoh-header($dark-theme);
}

Import the HeaderModule

Add the HeaderModule to your NgModule imports:

import { HeaderModule } from '@uoh/header';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HeaderModule],
  providers: [],
  bootstrap: [AppComponent]
})

Usage

Add the header library to the desired component html template. For example:

  <uoh-header subtitle="תת כותרת" [user]="user" (logOut)="onLogOut($event)"></uoh-header>

The header library accepts three input variables:

• title: A string to be used as the main header title. The default value is אוניברסיטת חיפה.
• subtitle: A string to be used as the header subtitle. The default value is undefined.
• user: A string containing the name of the user. If set, a log out button will be displayed on the header, next to the user name. When the user presses the log out button an event will be fired. This event can be catched by binding a function to the logOut output.

For example, in your component ts file:

export class AppComponent {
  title = 'app';
  user: string;
  private authorize$: Subscription;

  constructor(private authService: AuthService) {}

  onLogIn(username: string, password: string): void {
    this.authorize$ = this.authService.authorize(username, password).subscribe(user => {
      this.user = `${user.firstName} ${user.lastName}`;
    });
  }

  onLogOut(loggedOut: boolean): void {
    this.user = undefined;
    console.log('log out', loggedOut);
  }
}