Intelligenics Application Components

This is a start project for creating some common components used in various projects.

Navigation Component

Installation

npm install @intelligenics/application-components 

In your module you will need to add a reference to your imports

Navigation Component

This component provides a side navigation to render items directly in the sidebar or vertical menu structure

In your html file

<int-components-navigation [items]="items" (expand)="onItemExpanded($event)" (click)="onItemClicked($event)">
    <int-navigation-template-root>
        <ng-template let-item="item">
            <div class="navigation__rootrow">
                <i class="fas {{item?.icon }} mr-2"></i>{{item?.text}}
            </div>
        </ng-template>
    </int-navigation-template-root>
    <int-navigation-template-child>
        <ng-template let-item="item">
            <div class="navigation__childrow">
                <i class="fas {{item?.icon }} mr-2"></i>{{item?.text}}
            </div>
        </ng-template>
    </int-navigation-template-child>
</int-components-navigation> 

Data needs to be provided as an array or async observable array (async pipe). The items must implment the IMenuItem interface

/** The core interface to use for the navigation  component items */
export interface IMenuItem
{  
    /** menu text */
    text: string;

    /** Font awesome icon path */
    icon: string;

    /** Indicates if the item has children. This will show a expand option if true */
    hasChildren: boolean;


    /** A child collection of items nested under this item */
    items: Array<IMenuItem>;
}