src/app/home-page/breadcrumbs/breadcrumbs.component.ts
Builds the breadcrumbs for navigation, as well as the feedback and user details in the navigation bar.
| selector | app-breadcrumbs |
| styleUrls | breadcrumbs.component.css |
| templateUrl | ./breadcrumbs.component.html |
Properties |
|
Methods |
constructor(router: Router, toolService: ToolService, authGuardService: AuthGuardService)
|
||||||||||||||||
|
Constructor
Parameters :
|
| buildRouterLink | ||||||
buildRouterLink(pathPieces: )
|
||||||
|
Builds a URL, then navigates the router to it.
Parameters :
Returns :
boolean
boolean - Returns false to prevent full page reload. |
| Public authGuardService |
authGuardService:
|
Type : AuthGuardService
|
|
Enables Sign Out button. Being used in
breadcrumbs.component.html (i.e. DO NOT DELETE)
|
| Public router |
router:
|
Type : Router
|
|
Used to verify current location and navigate user to new page.
|
| Public toolService |
toolService:
|
Type : ToolService
|
|
Used to verify currently selected tool.
|
import { Component, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { ToolService } from '../../tool.service';
import { AuthGuardService } from '../../authguard.service'; // Being used in breadcrumbs.component.html (i.e. DO NOT DELETE)
/**
* Builds the breadcrumbs for navigation, as well as the feedback and
* user details in the navigation bar.
*/
@Component({
selector: 'app-breadcrumbs',
templateUrl: './breadcrumbs.component.html',
styleUrls: ['./breadcrumbs.component.css']
})
export class BreadcrumbsComponent {
/**
* Constructor
* @param router Used to verify current location and navigate user to new page.
* @param toolService Used to verify currently selected tool.
* @param authGuardService Enables Sign Out button. Being used in
* breadcrumbs.component.html (i.e. DO NOT DELETE)
*/
constructor(public router: Router,
public toolService: ToolService,
public authGuardService: AuthGuardService) { }
/**
* Builds a URL, then navigates the router to it.
* @param pathPieces - Array of each piece of the path to navigate to.
* @returns boolean - Returns false to prevent full page reload.
*/
buildRouterLink(pathPieces) {
this.router.navigate(pathPieces);
return false;
}
}
<div class="breadcrumbs">
<div class="nav-wrapper">
<div id="breadcrumb-links">
<a class="breadcrumb" [routerLink]="['home']">Home</a>
<a class="breadcrumb" *ngIf="toolService.selectedTool && router.url.includes('tools/')" [routerLink]="['home', 'tools', toolService.selectedTool.id, 'options']">{{toolService.selectedTool.title}}</a>
<div *ngIf="authGuardService.userDetails" class="user-info right">
<div>
{{authGuardService.userDetails.displayName}}
</div>
<a class="dropdown-trigger" materialize="dropdown" [materializeParams]="[{constrain_width: false, alignment: 'left', coverTrigger: false}]"
data-activates="user-dropdown">
<img [src]="authGuardService.userDetails.photoURL">
</a>
<ul id='user-dropdown' class='dropdown-content'>
<li>
<a class="blue-grey-text" (click)="authGuardService.signOut()">Sign Out</a>
</li>
</ul>
</div>
</div>
</div>
</div>