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:

npm install @vendasta/fec-nav --save
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:

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

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() {}
}