ng-custom-breadcrumb v1.0.3

ng-custom-breadcrumb

Installation

In order to use library, you can import library in any Angular application by running:

$ npm install ng-custom-breadcrumb

and then from your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import the library
import { BreadcrumbModule } from 'ng-custom-breadcrumb';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    BreadcrumbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use it in your Angular application:

<!-- You can now use the library component in app.component.html -->
<breadcrumb-component [breadcrumbModel]="breadcrumbModel"></breadcrumb-component>

You can define breadcrumbModel in your .ts file like below:

breadcrumbModel = {
    model: [
      { label: 'Categories', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Sports', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Football', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Countries', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Spain' },
      { label: 'F.C. Barcelona', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Squad', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' },
      { label: 'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi' }
    ],
    style: { fontSize: "17px", bgColor: "#535377", passiveTextColor: "rgb(184, 194, 230)", activeTextColor: "white", fontFamily: "monospace" }
  };

Sample Designs