kodense-web-core v0.0.8

Kodense web core

This library was generated with Angular CLI version 11.1.1.

Project status

Currently we are having limited functionalities. You can find the below list of functionalies in this package. `

• Side menu
• Header
• User menu
• Breadcrumbs
• Confirm dialog popup
• Information dialog popup `

About

This plugin is developed for internal use by team kodense.

Installation

To install this library, run:

npm install kodense-web-core --save

Import this library

Add angular material

Add Angular Material without SystemJS.

Note: Don't forget to select theme indigo-pink, scss style type, add animations and Material icons.

Add bootstrap

To get bootstrap, run: npm install bootstrap

To get Jquery, run: npm install jquery

You can add it in the styles and scripts array of the angular.json file as follows:

"styles": [  
  "styles.css",  
  "../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
  "./node_modules/jquery/dist/jquery.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

To get google font robot and material icons, add the following lines into index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Import kodense-web-core

From your Angular AppModule:

import { KodenseWebCoreModule } from 'kodense-web-core';

@NgModule({
  ...
  imports: [
    KodenseWebCoreModule //Add this
  ],
 ...
})

You can add it in the styles array of the angular.json file as follows:

"styles": [  
  ...
  "/node_modules/kodense-web-core/src/theme.scss",
]

Using this library

Once the library is imported, you can use its component in your Angular application: Create constant json files to maintain sideNavLinks to list on side menu and HideSideNavOnPages to hie side menu and header on particular pages.

Create .src/app/side-nav-links.ts file and add following sample data,

export const SideNavLinks = [
  {
    pageName: "template",
    label: "Template management",
    showBreadCrumb: false,
    routerLink: "/pages/",
    icon: "widgets",
    child:[
      {
        pageName: "add-template",
        label: "Create Template",
        showBreadCrumb: true,
        routerLink: "/pages/template/sample",
        icon: "add",
      },
      {
        pageName: "list-template",
        label: "All Templates",
        showBreadCrumb: true,
        routerLink: "/pages/template/list",
        icon: "ballot"
      }
    ]
  },
  {
    pageName: "settings",
    label: "Settings",
    showBreadCrumb: false,
    routerLink: "/pages/settings",
    icon: "settings",
    child:[]
  }
];

export const HideSideNavOnPages = [
  "login", "forgot", "otp"
]

In app.component.ts:

import { HideSideNavOnPages, SideNavLinks } from './side-nav-links';
...
export class AppComponent {
  sideNavLinks = SideNavLinks;
  hideSideNavOnPages = HideSideNavOnPages;
  userMenu = {
    appName: "Sample",
    name: "Developer",
    imageURL: "",
    menu: [
      {
        pageName: "profile",
        label: "Profile",
        showBreadCrumb: false,
        routerLink: "/pages/profile",
        icon: "person",
      }
    ]    
  }

  logout(event: any) {
    localStorage.clear();    
  }
}

In app.component.html:

<kodense-sidemenu 
  [sideNavLinks]="sideNavLinks"
  [hideSideNavOnPages]="hideSideNavOnPages"
  [userMenu]="userMenu"
  (logout)="logout($event)"
>
</kodense-sidemenu>