angular-material-app documentation
  1. Components
  2. HeaderComponent

File

src/app/admin/header/header.component.ts

Metadata

selector stbui-header
styleUrls ./header.component.scss
templateUrl ./header.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(router: Router)
Defined in src/app/admin/header/header.component.ts:15
Parameters :
Name Type Optional
router Router No

Inputs

customizer
Type : any
Defined in src/app/admin/header/header.component.ts:11
sidenav
Type : any
Defined in src/app/admin/header/header.component.ts:12

Methods

toggleFullscreen
toggleFullscreen()
Defined in src/app/admin/header/header.component.ts:27
Returns : void

Properties

isFullscreen
Type : boolean
Default value : false
Defined in src/app/admin/header/header.component.ts:14
showLoading
Type : boolean
Defined in src/app/admin/header/header.component.ts:15
 
import { Component, Input } from '@angular/core';
import { NavigationStart, NavigationEnd, Router } from '@angular/router';
import * as screenfull from 'screenfull';

@Component({
  selector: 'stbui-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  @Input() customizer: any;
  @Input() sidenav: any;

  isFullscreen: boolean = false;
  showLoading: boolean;

  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.showLoading = true;
      } else if (event instanceof NavigationEnd) {
        this.showLoading = false;
      }
    });
  }

  toggleFullscreen() {
    if (screenfull.enabled) {
      screenfull.toggle();
      this.isFullscreen = !this.isFullscreen;
    }
  }
}
Copy
<div class="main-toolbar mat-elevation-z2" fxLayout="row" fxLayoutAlign="start center">
  <button mat-icon-button (click)="sidenav.opened = !sidenav.opened">
    <mat-icon>menu</mat-icon>
  </button>

  <span fxFlex></span>

  <button mat-icon-button [fxHide]="true" [fxHide.gt-sm]="false" (click)="toggleFullscreen()">
    <mat-icon *ngIf="!isFullscreen">fullscreen</mat-icon>
    <mat-icon *ngIf="isFullscreen">fullscreen_exit</mat-icon>
  </button>

  <button mat-icon-button>
    <mat-icon>search</mat-icon>
  </button>

  <stbui-toolbar-notification></stbui-toolbar-notification>
  <stbui-toolbar-user></stbui-toolbar-user>

  <button mat-button class="more-btn" (click)="customizer.open()">
    <mat-icon>settings</mat-icon>
  </button>

</div>

<stbui-loading *ngIf="showLoading"></stbui-loading>
Copy

./header.component.scss 

:host {
  z-index: 4;
}

.main-toolbar {
  height: 64px;
  padding-left: 16px;
}

.more-btn {
  height: 100%;
  min-width: 70px;
}

.mat-icon-button {
  margin-right: 10px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""