feat(app): update demo app to work with new API

udayvunnam · Nov 5, 2019 · 0548981 · 0548981
1 parent f11980e
commit 0548981
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 17 deletions.
diff --git 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
@@ -1,12 +1,30 @@
 <div class="app-container mat-app-background" [ngClass]="{ 'xng-dark-theme': darkMode }">
  <app-navbar (themeChanged)="updateTheme($event)"></app-navbar>
- <section class="route-container">
- <xng-breadcrumb [separator]="separatorTemplate">
- <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info">
- <mat-icon *ngIf="info">{{ info }}</mat-icon>
+ <section class="route-container" fxLayout="column" fxLayoutGap="16px">
+ <xng-breadcrumb></xng-breadcrumb>
+
+ <xng-breadcrumb separator=">>">
+ <ng-container *xngBreadcrumbItem="let breadcrumb">
  {{ breadcrumb | titlecase }}
  </ng-container>
  </xng-breadcrumb>
+
+ <xng-breadcrumb [separator]="separatorTemplate"></xng-breadcrumb>
+
+ <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb">
+ <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
+ <mat-icon *ngIf="info">{{ info }}</mat-icon>
+ <ng-container>{{ breadcrumb | titlecase }}</ng-container>
+ </ng-container>
+ </xng-breadcrumb>
+
+ <xng-breadcrumb [separator]="separatorTemplate" class="myapp-breadcrumb">
+ <ng-container *xngBreadcrumbItem="let breadcrumb; let info = info; let first = first">
+ <mat-icon *ngIf="info && first">{{ info }}</mat-icon>
+ <ng-container *ngIf="!first">{{ breadcrumb | titlecase }}</ng-container>
+ </ng-container>
+ </xng-breadcrumb>
+
  <router-outlet></router-outlet>
  </section>
 </div>

diff --git 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
@@ -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
@@ -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;
+}