NavNode Model

The NavNode model implements the model for the various navigation components and is used for data delivery in the various navigation related services.

Properties

The NavNode model is a POCO has the following properties:

• Title - Gets the title to display for the nav node
• Url - Gets the url associated with the node
• Id - Gets node's unique id
• Children - Gets an Array object representing the child nodes for this node.
• IsGroup - Returns true if the node has child nodes.
• FAIcon - Gets the font awesome css class for the icon to display.

Constructor

You can construct a new NavNode model instance using its constructor:

    constructor(
         title: string, 
         url: string, 
         id: string, 
         faIcon?: string, 
         children?: Array<NavNode>)

Parameters:

• title - String containing the node's title
• url - String containing the node's url
• id - String containing the node's unique id
• faIcon - Optional. String containing the node's font awesome icon css tag. Use an empty string to suppress an icon
• children - Optional. Array of NavNodes representing the children of the node

Example

The following example implements a simple ng2 component using the NavNode model to render a navigation link:

import { Component } from '@angular/core';
import { NavNode} from 'ng2-app-scaffold';
@Component({
    selector: 'navnode',
    template: `
       <div class="navnode">
          <a [routerLink]="[node.Url]" id="{{node.Id}}">
             <span class="icon fa {{node.FAIcon}}"></span><span class="title">{{node.Title}}</span>
          </a>
       </div>
    `
})
export class Nav{
    node:NavNode;
    constructor(){
        this.node = new NavNode(
            'Navigate',
            '/home',
            'navNode_1');
    }
}