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

1. import ShkNgBreadcrumbModule from 'shk-ng-breadcrumb'.
2. insert ShkNgBreadcrumbModule into NgModule imports:[] list.
3. use it in html like that example:
   <shk-ng-breadcrumb [sitemapLinks]="sitemapLinks"
(linkClicked)="onLinkClicked($event)"></shk-ng-breadcrumb>
4. import SitemapLink from 'shk-ng-breadcrumb' in your component.
5. define a links array of type SitemapLink like that:
   sitemapLinks: SitemapLink[];
6. 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);
}
7. 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));
}

Note

Its need a bootstrap to style it.

Road Map

This is just a start, and this breadcrumb site map is still under development to include more features to this tool.

Contact Me

You can contact me for any issue by sending mail to my email address which is:
[email protected]

Further help

To get more help on the Angular CLI use ng help or go check out the [Angular CLI README] (https://github.com/angular/angular-cli/blob/master/README.md).

Keywords

breadcrumb, shaikoun-ng-breadcrumb, shk-ng-breadcrumb, sitemap.