Shk-ng-breadcrumb NPM

ShaikounNgBreadcrumb Lib

This package library was created by Ahmed Shaikoun to help those wanted a quick and powerful site map with breadcrumb with full control in TS files.

Release Info

This is a beta release!.

Install It

Type this command to install my breadcrumb:
npm i shk-ng-breadcrumb

How To Use It

import ShkNgBreadcrumbModule from 'shk-ng-breadcrumb'.
insert ShkNgBreadcrumbModule into NgModule imports:[] list.
use it in html like that example:
<shk-ng-breadcrumb [sitemapLinks]="sitemapLinks"
(linkClicked)="onLinkClicked($event)"></shk-ng-breadcrumb>
import SitemapLink from 'shk-ng-breadcrumb' in your component.
define a links array of type SitemapLink like that:
sitemapLinks: SitemapLink[];
Initialize this array with some links like this example:
initializeLinks(): void {
this.sitemapLinks = [];
/* define a link */
let link1 = new SitemapLink();
link1.link = "/home";
link1.text = "Home";
link1.title = "Home Page";
/* define another link */
let link2 = new SitemapLink();
link2.link = "/home/products";
link2.text = "Products";
link2.title = "Products Page";
/* define another link */
let link3 = new SitemapLink();
link3.link = "/home/products/cars";
link3.text = "Cars";
link3.title = "Cars Page";
/* define another link */
let link4 = new SitemapLink();
link4.text = "TOYOTA";
link4.title = "TOYOTA Page";
/* push links in links array */
this.sitemapLinks.push(link1);
this.sitemapLinks.push(link2);
this.sitemapLinks.push(link3);
this.sitemapLinks.push(link4);
}
You can simplify the previous initialization process by calling SitemapLink.prototype.initializeLink(...) function like this example:
initializeLinks(): void {
this.sitemapLinks = [];

this.sitemapLinks.push(SitemapLink.prototype.initializeLink("/home", "Home", "Home Page"));
this.sitemapLinks.push(SitemapLink.prototype.initializeLink("/home/products", "Products", "Products Page"));
this.sitemapLinks.push(SitemapLink.prototype.initializeLink("/home/products/cars", "Cars", "Cars Page"));
this.sitemapLinks.push(SitemapLink.prototype.initializeLink(null, "TOYOTA", "TOYOTA Page", ['some data', 'some names']));
}
8. to track every link click from breadcrumb in your component to know which link is clicked, define a handler for event linkClicked like that:
onLinkClicked(item: SitemapLink): void {
console.log(JSON.stringify(item));
}