#UI Tooling for Angular

Dependency

• @angular/common
• @angular/core
• bootstrap
• font-awesome-sass
• ngx-perfect-scrollbar

Compatibility

This tool was mainly created for angular electron application. However it was tested in browers like chrome and firefox and work as expected, but not yet confirmed for IE and other browsers. So make sure what your requirements are before using this module. We will look into browser compatibility and push new releases out as we develop on this tool.

Current Features

We have 3 Components available for now and will extend on this tooling UI in future. We will also like your feedback and suggestions to improve on this and give you the ultimate coding experience. Please contact me through [email protected]

1. ngx-ui-tab
2. ngx-ui-sidenav
3. ngx-ui-footer-taskbar
4. ngx-ui-split-container (to be added)
5. ngx-ui-docpanel (to be added)

How To add Perfect Scrollbar

Click on the Link to see the implementation of perfect-scrollbar

Add to your module

import { NgxUiTabModule, NgxUiToolingModule, NgxUiFooterTaskbarModule, NgxUiSidenavModule } from 'ngx-ui-tooling';

UI Tab (ngx-ui-tab)

######HTML code How to implement.

<ngxui-tabs
    #tabs
    [Theme]="'dark'"
    [TabText]="'Please click on the add button to the right to start a process'"
    (TabAddEvent)="onTabAdded($event)"
    (TabCloseEvent)="onTabClosed($event)">
    <div #tabsContainer *ngFor="let item of tabArray; let i=index">
        <ngxui-tab
            [TabId]="item.TabId"
            [Title]="item.Title"
            [Closable]="item.Closable"
            [Active]='item.Active'
            [Loading]="item.Loading">
            <ngxui-component-factory [id]="item.TabId" [componentData]="item.MyComponentData"></ngxui-component-factory>
        </ngxui-tab>
    </div >
</ngxui-tabs>

######Javascript　 How to implement. In your component of choice add the following code

import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import { TabComponent, ComponentData, TabsComponent } from 'ngx-ui-tooling';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
	@ViewChild('tabs') tabs: TabsComponent;
    tabArray: TabComponent[] = [];
    
    constructor() {}
	
	onTabAdded(event) {
		/*You can add your process here to get your component injected to the container*/
		/*This is all dynamic */
		
		const tab = new TabComponent();
        tab.Title = tile.Title;
        tab.Active = true;
        tab.Closable = false;
        tab.MyComponentData = new ComponentData();
        tab.MyComponentData.component = Your component to inject;
        tab.MyComponentData.inputs = Your component input data ;
        this.tabs.addTab(tab).then(
            (tabs: QueryList<TabComponent>) => {
                if (tabs.toArray().length !== this.tabArray.length) {
                    tabs.toArray().forEach(element => {
                        const t: TabComponent = this.tabArray.find((e: TabComponent) => e.TabId === element.TabId );
                        if (!t) {
                            this.tabArray.push(element);
                        }
                    });
                }
                setTimeout(() => {
                    this.tabs.layoutTabs();
                }, 1);
            },
            (error) => {
                console.log(error);
            }
        );
	
	}
	onTabClosed(tab: TabComponent){
		const index = this.tabArray.findIndex((e: TabComponent) => e.TabId === tab.TabId );
        this.tabArray.splice(index, 1);
	}
}

UI Side Navigation (ngx-ui-sidenav)

######HTML code

In your component of choice add the following code.

<ngxui-sidenav (CloseEvent)="onCloseSideNav($event)" (DismissEvent)="onDismissSideNav($event)" #sidenav>
    <a href="#" class="closebtn" (click)="btnCloseSideNav($event)">&times;</a>
    <p style="color:white">This is a test nav</p>
    <ngxui-sidenav-recent-activity>
        <perfect-scrollbar>
            <div class="category" href="#">Recent Activity</div>
            <a *ngIf="RecentItems.length <= 0" href="#" (click)="$event.preventDefault();">
                <span>No recent activity found</span>
            </a>
            <ng-container *ngFor="let recent of RecentItems">
                <a href="#" (click)="onOpenRecentActivity(recent)">
                    <img src="" alt="access"><span>Access</span>
                </a>
            </ng-container>
        </perfect-scrollbar>
    </ngxui-sidenav-recent-activity>
    <ngxui-sidenav-title-menu>
        <perfect-scrollbar >
            <div class="title-others">
               Registered Programs
            </div>
            <div class="box-others">
                <div class="box"
                    *ngFor="let tile of this.TileMenuItems | filterProduct:'IsRegistered':true"
                    (click)="onConfirmProcess(tile);">
                    <img [src]="tile?.ImgUrl" alt="">
                    <span>{{tile?.Title}}</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>Word</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>Excel</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>Powerpoint</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>Outlook</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>Publisher</span>
                </div>
                <div class="box">
                    <img src="" alt="">
                    <span>OneNote</span>
                </div>
            </div>
        </perfect-scrollbar>
    </ngxui-sidenav-title-menu>
</ngxui-sidenav>

######Javascript　 How to implement. In your component of choice add the following.

import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import {  SidenavComponent } from 'ngx-ui-tooling';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
	@ViewChild('sidenav') sidenav: SidenavComponent;
    RecentItems: RecentActivity[] = [];

    constructor() {
        this.sidenav.openNav();
    }

    btnCloseSideNav($event) {
        this.sidenav.dismissNav({});
    }

    onDismissSideNav(tile: TileMenu) {
        /*Do your own events here*/
    }

    onCloseSideNav(event) {
        /*Do your own events here*/
    }

    onOpenRecentActivity(recent){
        /*Recent Activity Events*/
    }
}

UI Footer Taskbar (ngx-ui-footer-taskbar)

######HTML code In your component of choice add the following code.

<ngxui-footer-taskbar [ShowStartMenu]="true" (NotificationEvent)="eventAppNotification($event)">
    <ngxui-taskbar-tabs-left>
        <!--<a href="#search" id="search"></a>
        <a href="#tabs" id="tabs-windows"></a>-->
    </ngxui-taskbar-tabs-left>
    <ngxui-taskbar-tabs-right>
    </ngxui-taskbar-tabs-right>
    <ngxui-status-bar-right [ShowNotification]="true">
        <a> <i class="fa fa-bell"></i></a>
    </ngxui-status-bar-right>
    <ngxui-footer-taskpane #footertaskpane>
        <ngxui-taskpane-user-menu>
            <a class="push" href="#"><i class="fa fa-home" style="font-size: 2em"></i></a>
            <a href="#"><i class="fa fa-user" style="font-size: 2em"></i></a>
            <a href="#"><i class="fa fa-cog" style="font-size: 2em"></i></a>
        </ngxui-taskpane-user-menu>
        <ngxui-taskpane-recent-activity>
            <div class="category" href="#">Recent Activity</div>
            <perfect-scrollbar >
            <a href="#"><img src="" alt="access"> <span>Access</span></a>
            <a href="#"><img src="" alt="sublime"> <span>Sublime text3</span></a>
            </perfect-scrollbar>
        </ngxui-taskpane-recent-activity>
        <ngxui-taskpane-tile-menu>
            <perfect-scrollbar >
                <div class="title-others">
                    Registered Programs
                </div>
                <div class="box-others">
                    <div class="box">
                        <img src="" alt="">
                        <span>Word</span>
                    </div>
                    <div class="box">
                        <img src="" alt="">
                        <span>Excel</span>
                    </div>
                    <div class="box">
                        <img src="" alt="">
                        <span>Powerpoint</span>
                    </div>
                    <div class="box">
                        <img src="" alt="">
                        <span>Outlook</span>
                    </div>
                    <div class="box">
                        <img src="" alt="">
                        <span>Publisher</span>
                    </div>
                    <div class="box">
                        <img src="" alt="">
                        <span>OneNote</span>
                    </div>
                </div>
            </perfect-scrollbar>
        </ngxui-taskpane-tile-menu>
    </ngxui-footer-taskpane>
</ngxui-footer-taskbar>

######Javascript　 How to implement. In your component of choice add the following.

import { Component, OnInit, QueryList, ViewChild } from '@angular/core';
import {  FooterTaskpaneComponent } from 'ngx-ui-tooling';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
	@ViewChild('footertaskpane') footertaskpane: FooterTaskpaneComponent;

    constructor() {
       
    }

    ngOnInit() {
        this.footertaskpane.closeTaskPane(event);
    }
}