ANGULAR2: USING Breadcrumb AS ANGULAR SERVICE IN ANGULAR 2 APPLICATION

Standard

Since breadcrumb is essential component for any connected web application, we have couple of breadcrumb component available in market for angular2, I am using primeng breadcrumb…

Usage

Since breadcrumb is used throughout the application, so its better to define it once in index.html and then try to set/reset through component code. I am also using BehaviorSubject object in service, which is way more awesome and better then observable in many cases, Behavior Subject is a type of subject, a subject is a special type of observable so you can subscribe to messages like any other observable. In plain words when specific page is invoked, its ngOnit() method call the breadcrumb service and pass the reference of breadcrumb value to be load, then service set new value into its BehaviorSubject object(breadcrumbItem), all variables(objBreadcrumbs) throughout the application subscribed to this BehaviorSubject object are then alerted and refresh their state with the new value.

Index/main-component.html code:

<p-breadcrumb [model]="objBreadcrumbs"></p-breadcrumb>

main-component.ts:

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';
import { BreadcrumbService} from './shared/service/breadcrumb.service';

@Component({
    selector: 'my-app',
    templateUrl: '../../Scripts/app/app.component.html'
})

export class AppComponent implements OnInit{
    objBreadcrumbs: MenuItem[];

    constructor(
        private breadcrumbService: BreadcrumbService) {
        this.objBreadcrumbs = [];
    }

    ngOnInit() {
        this.breadcrumbService.breadcrumbItem.subscribe((val: MenuItem[]) => {
            if (val)
                this.objBreadcrumbs = val;
        });
    }
}

Breadcrumb.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { MenuItem } from 'primeng/primeng';

@Injectable()
export class BreadcrumbService {
    public breadcrumbItem: BehaviorSubject<MenuItem[]> = new BehaviorSubject<MenuItem[]>([]);
    private itemBreadcrums: MenuItem[];

    constructor() {
    }

    setBreadcrumbs(page: string) {
        this.itemBreadcrums = [];
        let refList: MenuItem[] = this.getBreadcrumsLink(page);
        this.breadcrumbItem.next(refList);
    }

    private getBreadcrumsLink(page: string): MenuItem[] {
        this.itemBreadcrums = [];
        let item: BreadcrumItem = this.getsearchMoviePage();

        switch (page) {
            case 'dashboard':
                this.itemBreadcrums.push({ label: '' });
                break;
            case 'searchMovie':
                this.itemBreadcrums.push({ label: 'Dashboard', routerLink: ['dashboard/home'] });
                this.itemBreadcrums.push({ label: 'Search Movie' });
                break;
            case 'speechSearchMovie':
                this.itemBreadcrums.push({ label: 'Dashboard', routerLink: ['dashboard/home'] });
                this.itemBreadcrums.push({ label: 'Speech Search Movie' });
                break;
            default:
                this.itemBreadcrums = [];
        }
        return this.itemBreadcrums;
    }
}

custom-component.ts:

ngOnInit() {
        this.breadcrumbService.setBreadcrumbs("movieDetail");
    }

Output:

screenshot_8

screenshot_9

 

P.S.

Please include primeng package in app.module.ts

import { BreadcrumbModule, MenuItem } from 'primeng/primeng';
Advertisements

4 thoughts on “ANGULAR2: USING Breadcrumb AS ANGULAR SERVICE IN ANGULAR 2 APPLICATION

    • If you look closely for each breadcrumb item, I am pushing link for homepage at the initial index of breadcrumb array.
      this.itemBreadcrums.push({ label: ‘Dashboard’, routerLink: [‘dashboard/home’] });

      case ‘searchMovie’:
      this.itemBreadcrums.push({ label: ‘Dashboard’, routerLink: [‘dashboard/home’] });
      this.itemBreadcrums.push({ label: ‘Search Movie’ });
      break;
      case ‘speechSearchMovie’:
      this.itemBreadcrums.push({ label: ‘Dashboard’, routerLink: [‘dashboard/home’] });
      this.itemBreadcrums.push({ label: ‘Speech Search Movie’ });
      break;

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s