File

src/app/home-page/breadcrumbs/breadcrumbs.component.ts

Description

Builds the breadcrumbs for navigation, as well as the feedback and user details in the navigation bar.

Metadata

selector app-breadcrumbs
styleUrls breadcrumbs.component.css
templateUrl ./breadcrumbs.component.html

Index

Properties
Methods

Constructor

constructor(router: Router, toolService: ToolService, authGuardService: AuthGuardService)

Constructor

Parameters :
Name Type Optional Description
router Router no

Used to verify current location and navigate user to new page.

toolService ToolService no

Used to verify currently selected tool.

authGuardService AuthGuardService no

Enables Sign Out button. Being used in breadcrumbs.component.html (i.e. DO NOT DELETE)

Methods

buildRouterLink
buildRouterLink(pathPieces: )

Builds a URL, then navigates the router to it.

Parameters :
Name Optional Description
pathPieces no
  • Array of each piece of the path to navigate to.
Returns : boolean

boolean - Returns false to prevent full page reload.

Properties

Public authGuardService
authGuardService: AuthGuardService
Type : AuthGuardService
Enables Sign Out button. Being used in breadcrumbs.component.html (i.e. DO NOT DELETE)
Public router
router: Router
Type : Router
Used to verify current location and navigate user to new page.
Public toolService
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>
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""