Angular 2 Breadcrumb – Salesforce

Angular 2 Breadcrumb from Salesforce you can use it to give your users contextual information about the app structure (or page hierarchy).

angular 2 breadcrumb salesforce
angular 2 breadcrumb salesforce

The Component developed using The Lightning Design System CSS Framework.

Angular 2 Breadcrumb is a native Angular 2 directive (component) developed with typescript.

If you want to setup the environment read this article.

 

Try Online Example at the end of article: try-it-angular-2

 

HTML File:


<div style="padding-top:50px;padding-left:10px">
<ngl-breadcrumbs assistiveText="You are here:" class="slds-m-top--large">
<ngl-breadcrumb href="javascript:void(0)" class="slds-text-heading--label">Angular 2 (Parent)</ngl-breadcrumb>
<ngl-breadcrumb href="javascript:void(0)">Angular 2 (Next Page)</ngl-breadcrumb>
</ngl-breadcrumbs>
</div>
<div style="padding-top:20px;padding-left:10px">
<h2 style="font-weight:bold">Angular 2 Article</h2>
<p>
The Component developed using The Lightning Design System
CSS Framework.

</p>
</div>

TypeScrip File :


/**
* Created by Tareq Boulakjar. from angulartypescript.com
*/
import {bootstrap}  from 'angular2/platform/browser';
import {Component} from 'angular2/core';
import {NGL_DIRECTIVES, provideNglConfig} from 'ng-lightning/ng-lightning';

@Component({
selector: 'my-app',
directives: [NGL_DIRECTIVES],
templateUrl: 'app/angular-2-breadcrumb.html'
})
export class Angular2Breadcrumb {


}

bootstrap(Angular2Breadcrumb, [provideNglConfig()]);
/*
Copyright 2016 angulartypescript.com. All Rights Reserved.
Everyone can use this source code; don’t forget to indicate the source please:
http://angulartypescript.com/
*/

 

API Documentation:


<ngl-breadcrumbs>

Input


assistiveText?: string: The assistive text for accessibility purposes.


<ngl-breadcrumb>

Input


href?: string: The target of the specific path.

all files from here : ng-lightning

angular 2 breadcrumb