diff --git a/projects/xng-breadcrumb-app/src/app/app-routing.module.ts b/projects/xng-breadcrumb-app/src/app/app-routing.module.ts
index d170883..02e1ee7 100644
--- a/projects/xng-breadcrumb-app/src/app/app-routing.module.ts
+++ b/projects/xng-breadcrumb-app/src/app/app-routing.module.ts
@@ -11,7 +11,7 @@ export const appRoutes: Routes = [
component: HomeComponent,
data: {
breadcrumb: {
- label: '',
+ label: 'app home',
info: 'home'
}
}
@@ -25,11 +25,21 @@ export const appRoutes: Routes = [
},
{
path: 'mentor',
- loadChildren: './mentor/mentor.module#MentorModule'
+ loadChildren: './mentor/mentor.module#MentorModule',
+ data: {
+ breadcrumb: {
+ info: 'person'
+ }
+ }
},
{
path: 'mentee',
- loadChildren: './mentee/mentee.module#MenteeModule'
+ loadChildren: './mentee/mentee.module#MenteeModule',
+ data: {
+ breadcrumb: {
+ info: 'person_outline'
+ }
+ }
},
{
path: 'connect',
diff --git a/projects/xng-breadcrumb-app/src/app/app.component.html b/projects/xng-breadcrumb-app/src/app/app.component.html
index ea61c9c..db5c787 100644
--- a/projects/xng-breadcrumb-app/src/app/app.component.html
+++ b/projects/xng-breadcrumb-app/src/app/app.component.html
@@ -1,12 +1,30 @@
-
-
-
- {{ info }}
+
+
+
+
+
{{ breadcrumb | titlecase }}
+
+
+
+
+
+ {{ info }}
+ {{ breadcrumb | titlecase }}
+
+
+
+
+
+ {{ info }}
+ {{ breadcrumb | titlecase }}
+
+
+
diff --git a/projects/xng-breadcrumb-app/src/app/app.component.scss b/projects/xng-breadcrumb-app/src/app/app.component.scss
index 71832a8..2f09b65 100644
--- a/projects/xng-breadcrumb-app/src/app/app.component.scss
+++ b/projects/xng-breadcrumb-app/src/app/app.component.scss
@@ -13,9 +13,3 @@
min-height: calc(100% - 112px);
}
}
-
-.tweets-container {
- max-height: calc(100vh - 56px);
- overflow: scroll;
- padding-right: 12px;
-}
diff --git a/projects/xng-breadcrumb-app/src/app/shared/constants/code.ts b/projects/xng-breadcrumb-app/src/app/shared/constants/code.ts
index e398c7d..4fad036 100644
--- a/projects/xng-breadcrumb-app/src/app/shared/constants/code.ts
+++ b/projects/xng-breadcrumb-app/src/app/shared/constants/code.ts
@@ -1,15 +1,17 @@
export const dashboard = `
-// 'dashboard' mapped to 'Home'
+// 'dashboard' mapped to 'my dashboard'
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule',
- data: { breadcrumb: 'Home' }
+ data: {
+ breadcrumb: 'my dashboard'
+ }
}
//-----------------------ALTERNATIVE------------------------
constructor(private breadcrumbService: BreadcrumbService) {}
-this.breadcrumbService.set('dashboard', 'Home');`;
+this.breadcrumbService.set('dashboard', 'my dashboard');`;
export const mentorList = `
// 'mentor' mapped to 'Enabler' using BreadcrumbService set()
@@ -142,7 +144,7 @@ export const menteeEdit = `
//-----------------------ALTERNATIVE------------------------
-// use BreadcrumbService skip() or skipForAlias() methods
+// use BreadcrumbService set() method
constructor(private breadcrumbService: BreadcrumbService) {}
this.breadcrumbService.set('@menteeEdit', { skip: true });
diff --git a/projects/xng-breadcrumb-app/src/styles.scss b/projects/xng-breadcrumb-app/src/styles.scss
index 5ecaf99..804881b 100644
--- a/projects/xng-breadcrumb-app/src/styles.scss
+++ b/projects/xng-breadcrumb-app/src/styles.scss
@@ -53,3 +53,14 @@ body {
margin: 0;
}
}
+
+.xng-breadcrumb-root {
+ padding: 8px 16px;
+ display: inline-block;
+ border-radius: 4px;
+ background-color: #e7f1f1;
+}
+
+.myapp-breadcrumb .xng-breadcrumb-trail {
+ color: teal;
+}