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;
+}