File
Metadata
| selector |
app-header |
| styleUrls |
app-header.component.css |
| templateUrl |
./app-header.component.html |
display_control
|
Default value: true
|
|
|
display_logout
|
Default value: false
|
|
|
display_messages
|
Default value: true
|
|
|
display_notifications
|
Default value: true
|
|
|
display_tasks
|
Default value: true
|
|
|
display_user
|
Default value: true
|
|
|
Methods
|
toggleSidebar
|
toggleSidebar()
|
|
|
|
|
import { Component, Input } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { UserService } from '../../services/user.service';
import { ControlSidebarService } from '../../services/control-sidebar.service';
@Component( {
selector: 'app-header',
styleUrls: ['./app-header.component.css'],
templateUrl: './app-header.component.html'
})
export class AppHeaderComponent {
@Input() public display_messages = true;
@Input() public display_notifications = true;
@Input() public display_tasks = true;
@Input() public display_user = true;
@Input() public display_control = true;
@Input() public display_logout = false;
@Input() public header_components = [];
constructor(
private userService: UserService,
private sidebarService: ControlSidebarService
) { }
logout(): void {
this.userService.logout();
}
toggleSidebar(){
this.sidebarService.toggle();
}
}
<!-- Main Header -->
<header class="main-header">
<!-- Logo -->
<app-logo></app-logo>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a class="sidebar-toggle" data-toggle="offcanvas" role="button">
<!-- ADMIN LTE 2.4.0 <a class="sidebar-toggle" data-toggle="push-menu" role="button"> -->
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav" >
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu messagesBox" *ngIf="display_messages"></li>
<!-- Notifications Menu -->
<li class="dropdown notifications-menu notificationsBox" *ngIf="display_notifications"></li>
<!-- Tasks Menu -->
<li class="dropdown tasks-menu tasksBox" *ngIf="display_tasks"></li>
<!-- User Account Menu -->
<li class="dropdown user user-menu userBox" *ngIf="display_user"></li>
<li *ngIf="display_logout">
<button class="btn btn-primary btn-lg" (click)="logout()">
<i class="fa fa-power-off"></i>
</button>
</li>
<!-- Control Sidebar Toggle Button -->
<li>
<a class="toggle-sidebar-right" role="button" *ngIf="display_control">
<i class="fa fa-gears" (click)="toggleSidebar()"></i>
</a>
</li>
<!-- Additionnal components -->
<ng-container *ngFor="let widget of header_components">
<li>
<app-component-loader [class_component]="widget.class" [data]="widget.data"></app-component-loader>
</li>
</ng-container>
</ul>
</div>
</nav>
</header>
Legend
Html element with directive