File
Description
This component is responsible for showing the top bar containing the home icon
on the left-hand side and the mock settings and user icon as well as the functional
log out button on the right-hand side. It does NOT determine whether to show the sandwich
menu icon itself, but gets this information passed from FrameComponent.
Metadata
| selector |
app-top-toolbar |
| styleUrls |
./top-toolbar.component.scss |
| templateUrl |
./top-toolbar.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Constructor
constructor(breakpointObserver: BreakpointObserver, authService: AuthenticationService, dialog: MatDialog)
|
|
|
Parameters :
| Name |
Type |
Optional |
| breakpointObserver |
BreakpointObserver
|
No
|
| authService |
AuthenticationService
|
No
|
| dialog |
MatDialog
|
No
|
|
|
showMenuButton
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
Public
handleClick
|
handleClick()
|
|
|
|
|
|
Public
openSettingsDialog
|
openSettingsDialog()
|
|
|
|
|
|
isHandset$
|
Type : Observable<boolean>
|
Default value : this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map((result) => result.matches),
shareReplay()
)
|
|
|
import {Component, Output, EventEmitter, Input} from '@angular/core';
import {BreakpointObserver, Breakpoints} from '@angular/cdk/layout';
import {Observable} from 'rxjs';
import {map, shareReplay} from 'rxjs/operators';
import {AuthenticationService} from '@app/auth/authentication.service';
import {MatDialog} from '@angular/material/dialog';
import {SettingsDialogComponent} from '@app/dialogs/settings-dialog/settings-dialog.component';
/**
* This component is responsible for showing the top bar containing the home icon
* on the left-hand side and the mock settings and user icon as well as the functional
* log out button on the right-hand side. It does NOT determine whether to show the sandwich
* menu icon itself, but gets this information passed from FrameComponent.
*/
@Component({
selector: 'app-top-toolbar',
templateUrl: './top-toolbar.component.html',
styleUrls: ['./top-toolbar.component.scss']
})
export class TopToolbarComponent {
@Input()
showMenuButton = false;
@Output()
public menuClick = new EventEmitter();
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map((result) => result.matches),
shareReplay()
);
constructor(private breakpointObserver: BreakpointObserver, public authService: AuthenticationService, private dialog: MatDialog) {}
public handleClick(): void {
this.menuClick.emit();
}
public openSettingsDialog(): void {
this.dialog.open(SettingsDialogComponent);
}
}
<mat-toolbar color="primary" id="toolbar">
<!--add *ngIf="isHandset$ | async" within the button tag if you want to show the menu toggle button on mobile only-->
<button
mat-icon-button
class="example-icon"
aria-label="Toggle sidenav"
(click)="this.handleClick()"
[hidden]="!showMenuButton"
title="Show menu"
>
<mat-icon>menu</mat-icon>
</button>
<button
routerLink="/"
mat-icon-button
class="example-icon favorite-icon"
aria-label="Home icon-button with a house"
title="Show all projects"
>
<mat-icon>home</mat-icon>
</button>
<span class="toolbar-spacer"></span>
<!--This div makes the setting and account icon stay together - mat-toolbar has justify-content set-->
<div>
<button
(click)="openSettingsDialog()"
mat-icon-button
class="example-icon favorite-icon"
aria-label="Example icon-button with heart icon"
title="Settings"
>
<mat-icon>settings</mat-icon>
</button>
<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon" title="User settings">
<mat-icon>account_circle</mat-icon>
</button>
<button
(click)="authService.logout()"
mat-icon-button
class="example-icon"
aria-label="Example icon-button with share icon"
title="Logout"
>
<mat-icon>logout</mat-icon>
</button>
</div>
</mat-toolbar>
mat-toolbar {
position: sticky;
top: 0;
z-index: 1;
}
.toolbar-spacer {
flex: 1 1 auto;
}
.mat-toolbar {
justify-content: space-between;
}
.toolbar-spacer {
flex: 1 1 auto;
}
#current-project {
font-size: 12px;
border: 3px solid white;
border-radius: 0.5em;
padding: 0 4px 0 4px;
margin: auto;
}
Legend
Html element with directive