This package has been deprecated

Author message:

No longer Supported

@vendasta/fec-nav

nav

nav is a component which wraps page content for navigation, such as this documentation site does! Below is an outline of how it is used, including its inputs.

Requirements

To setup the navigation component you will need to:

• Install the component to your project

npm install @vendasta/fec-nav --save

• Next, you will need to import and setup your navigation module (generally in xxx.module.ts)

import { NavigationModule } from "@vendasta/fec-nav/navigation.module";
import { RouterModule } from "@angular/router";
…
@NgModule({
    …
    imports: [
        NavigationModule
    ]
})

Usage

The above will provide the bare minimum to compile nav. To actually use nav, you will need its inputs, outputs, and router. You can begin by including the imports:

import {Component} from "@angular/core";
import {HTTP_PROVIDERS} from "@angular/http";
import {bootstrap} from "@angular/platform-browser-dynamic";
import {provideRouter, ROUTER_DIRECTIVES, Router} from "@ngrx/router";

import {MenuItem} from "@vendasta/fec-menu/menu-item";
import {NavigationComponent} from "@vendasta/fec-nav/navigation.component";

import {routes} from "./routes";
…
//noinspection TypeScriptValidateTypes
bootstrap(AppComponent, [
    HTTP_PROVIDERS,
    provideRouter(routes)
]);

The nav component will navigate using a route.

import {Routes} from "@ngrx/router";

import { AppComponent } from "./app";
import * as views from "./views/index";

export const routes: Routes = [
        {
            path: "/",
            component: AppComponent
        },
    ];

You can import your routes from anywhere, but in this example they are kept in views/. For each link you plan to use in your nav, you will need a new route. Again, this is assuming you are using nav in app.ts (ie. the entry point for your Angular2 application).

Next, you can use your new nav component within your app:

@Component({
    selector: "app",
    template: `<va-navigation
                [partnerLogoUrl]="'./doc/vendasta-logo-large.png'"
                [productName]="'Partner Center'"
                [partnerName]="partnerName"
                [menuItems]="menuItems"
                [apiUrl]="navigationUrl"
                [activeMenuId]="activeMenuId"
                [userOptions]="userOptions"
                [ngClass]="navTheme"
                (menuItemClickEvent)="onMenuItemClick($event);">
                    <div body class="page-container">
                        <route-view></route-view>
                    </div>
                </va-navigation>`,
    directives: [
        NavigationComponent,
        ROUTER_DIRECTIVES
    ]
})

Note: The body attribute is required for any content to be transcluded in the page content area of the nav component.

There are a number of inputs that nav is set up for:

• partnerLogoUrl, productName, partnerName: the partner's information,
• navTheme: the colour theme of the nav,
• menuItems: the actual list of navigation items in MenuItem (JSON) format,
• apiUrl: alternatively to the menuItems, an apiUrl which will make an HTTP request to fill the list of navigation items
• activeMenuId: the id of the current menuId
• userOptions: an array of MenuItems to populate the top right drop down (ex. logout)

Additionally, there is an output that nav will pass up to app:

• menuItemClickEvent: this is implemented by including a function to be called when a menuItemClickEvent is fired off

The inputs, output, and router go into the AppComponent:

export class AppComponent {
    activeMenuId: string = templateData.activeMenuId;
    menuItems: MenuItem[] = templateData.menuItems;
    navigationUrl: string = "http://localhost:8000/";
    userOptions: MenuItem[] = templateData.userOptions;
    partnerName: string = templateData.partnerName;
    navTheme: string = templateData.navTheme;

    constructor(private router: Router) {}

    onMenuItemClick($event: any): void {
        this.handleRoutes($event[0].value);
    }

    handleRoutes(routeName: string): void {
        this.activeMenuId = routeName;
        switch(routeName) {
            case "formDocs":
                this.router.go('/form-docs');
        }
    }
}

In our case, we grabbed from templateData, passed into the Angular2 app. For any pages, include them within handleRoutes.

Lastly, we will want to store the actual views we are switching between within a views folder. Our views/index.ts will export all of our views:

export {ExampleDocumenationComponent} from "./exampledoc.component";

And the corresponding files (eg. exampledoc.component.ts):

import {Component} from "@angular/core";

@Component({
    moduleId: module.id,
    template: `
<div>Bacon ipsum dolor amet corned beef drumstick venison strip steak boudin landjaeger pork belly sirloin. Landjaeger bacon shankle tenderloin pig kevin bresaola, short ribs …<div>
`
})

export class ExampleDocumentationComponent {
    constructor() {}
}