feat: use xng-breadcrumb in SSR and docs updated (#126)

README.md

@@ -2,7 +2,7 @@
 
 <div align="center">
 
-> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
+> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
 
 [![CircleCI](https://circleci.com/gh/udayvunnam/xng-breadcrumb.svg?shield&circle-token=:circle-token)](https://circleci.com/gh/udayvunnam/xng-breadcrumb)
 [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
@@ -47,6 +47,8 @@
 
 - ✅ **QueryParams and Fragment**: Preserves QueryParams and Fragemnet while navigating via breadcrumbs
 
+- ✅ **SSR**: Supports server side rendering with nguniversal
+
 ## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam)
 
 ## Contributors ✨

apps/ssr/src/app/app.component.html

@@ -3,7 +3,7 @@ <h1>{{ title }}</h1>
   <a routerLink="/dashboard">Dashboard</a>
   <a routerLink="/heroes">Heroes</a>
 </nav>
-<!-- <xng-breadcrumb></xng-breadcrumb> -->
+<xng-breadcrumb></xng-breadcrumb>
 
 <router-outlet></router-outlet>
 <app-messages></app-messages>

apps/ssr/src/app/app.module.ts

@@ -1,4 +1,4 @@
-// import { BreadcrumbModule } from 'xng-breadcrumb';
+import { BreadcrumbModule } from 'xng-breadcrumb';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
@@ -25,7 +25,7 @@ import { isPlatformBrowser } from '@angular/common';
     FormsModule,
     AppRoutingModule,
     HttpClientModule,
-    // BreadcrumbModule,
+    BreadcrumbModule,
     // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
     // and returns simulated server responses.
     // Remove it when a real server is ready to receive requests.

apps/ssr/tsconfig.json

@@ -15,15 +15,15 @@
   ],
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
+    "noPropertyAccessFromIndexSignature": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictInputAccessModifiers": false,
+    "strictTemplates": false
   }
 }

docs/README.md

@@ -1,6 +1,6 @@
 # xng-breadcrumb
 
-> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
+> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. <https://www.npmjs.com/package/xng-breadcrumb>
 
 [![CircleCI](https://circleci.com/gh/udayvunnam/xng-breadcrumb.svg?shield&circle-token=:circle-token)](https://circleci.com/gh/udayvunnam/xng-breadcrumb)
 [![npm version](https://img.shields.io/npm/v/xng-breadcrumb.svg)](https://www.npmjs.com/package/xng-breadcrumb)
@@ -39,6 +39,8 @@
 
 - ✅ **QueryParams and Fragment**: Preserves QueryParams and Fragemnet while navigating via breadcrumbs
 
+- ✅ **SSR**: Supports server side rendering with nguniversal
+
 ## ❤️ [Become a Sponsor!](http://paypal.me/udayvunnam)
 
 ## Contributors ✨

docs/_sidebar.md

@@ -1,8 +1,8 @@
 - Getting started
 
   - [Quick start](quickstart.md)
-  - [Static labels](static-breadcrumb.md)
-  - [Dynamic lables](dynamic-breadcrumb.md)
+  - [Declarative breadcrumbs](declarative-breadcrumbs.md)
+  - [Dynamic breadcrumbs](dynamic-breadcrumbs.md)
 
 - Guide
 

docs/static-breadcrumb.md → docs/declarative-breadcrumbs.md

@@ -1,7 +1,13 @@
-# Static breadcrumb
+# Declarative breadcrumbs
 
 We can define breadcrumbs as part of routing module configuration for any path. Just add `breadcrumb` property in `data` object during route declaration
 
+`breadcrumb` can be defined as a **string** OR **object** OR **function**.
+
+## defining breadcrumb as a string
+
+define **breadcrumb as a string** if you are know the breadcrumb text value for a route upfront
+
 ```javascript
   {
     path: 'dashboard',
@@ -15,12 +21,11 @@ We can define breadcrumbs as part of routing module configuration for any path.
   }
 ```
 
-- a `breadcrumb` can be defined as a **string** OR **object** OR **function**.
-- Use **breadcrumb as a string** if you are just providing breadcrumb text
-- Use **breadcrumb as an object** if you are providing additional properties like `alias`, `skip`, `info`, `disable`. If you define breadcrumb as an object, **label** property denotes breadcrumb text.
-- Use **breadcrumb as a function** if you want to alter the auto-generated label as needed.
+## defining breadcrumb as an object
 
-## breadcrumb as an object
+- Use **breadcrumb as an object** if you are providing additional properties like `alias`, `skip`, `disable`.
+- If you define breadcrumb as an object, **label** property denotes breadcrumb text.
+- Use `info` property to pass arbitrary data associated with a route which you can use in breadcrumb selector. [See usage](add-icon-with-label.md)
 
 ```javascript
   {
@@ -40,7 +45,10 @@ We can define breadcrumbs as part of routing module configuration for any path.
   }
 ```
 
-## breadcrumb as a function
+## defining breadcrumb as a function
+
+Breadcrumb as a function gives you more power :)
+Use **breadcrumb as a function** if you want to alter the auto-generated label in more granular way.
 
 ```javascript
 {

docs/dynamic-breadcrumb.md → docs/dynamic-breadcrumbs.md

@@ -1,4 +1,4 @@
-# Dynamic breadcrumb
+# Dynamic breadcrumbs
 
 We can update breadcrumbs from components and services dynamically. This is useful when resolving route **id** to a **name**. Ex: ProductId in URL need to show ProductName in breadcrumb
 

docs/quickstart.md

@@ -8,7 +8,7 @@ npm install --save xng-breadcrumb
 yarn add xng-breadcrumb
 ```
 
-## Import BreadcrumbModule in your Application
+## Import BreadcrumbModule in app.module.ts
 
 ```javascript
 import {BreadcrumbModule} from 'xng-breadcrumb';
@@ -23,12 +23,12 @@ export class AppModule { }
 
 ## Add xng-breadcrumb selector anywhere in the app
 
-Usually added in app.component.html
+Usually it is added in app.component.html
 
 ```html
 <xng-breadcrumb></xng-breadcrumb>
 ```
 
 🎉🎉 That's it. You should see auto-generated breadcrumbs appearing for each route.
 
-Note: XngBreadcrumb has a peer dependency on `@angular/router`. Include `RouterModule` in App imports, if you haven't already.
+Note: XngBreadcrumb has a peer dependency on `@angular/router`. Include `RouterModule` in your app.module.ts imports, if you haven't already.