From 8ce6489bc12df1e984d75f6ea9ddcbd3022b52eb Mon Sep 17 00:00:00 2001 From: Uday Vunnam <20707504+udayvunnam@users.noreply.github.com> Date: Tue, 1 Feb 2022 09:16:30 +0530 Subject: [PATCH] feat: use xng-breadcrumb in SSR and docs updated (#126) --- README.md | 4 +++- apps/ssr/src/app/app.component.html | 2 +- apps/ssr/src/app/app.module.ts | 4 ++-- apps/ssr/tsconfig.json | 8 +++---- docs/README.md | 4 +++- docs/_sidebar.md | 4 ++-- ...eadcrumb.md => declarative-breadcrumbs.md} | 22 +++++++++++++------ ...c-breadcrumb.md => dynamic-breadcrumbs.md} | 2 +- docs/quickstart.md | 6 ++--- 9 files changed, 34 insertions(+), 22 deletions(-) rename docs/{static-breadcrumb.md => declarative-breadcrumbs.md} (58%) rename docs/{dynamic-breadcrumb.md => dynamic-breadcrumbs.md} (98%) diff --git a/README.md b/README.md index b838147..052b3f8 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@
-> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. +> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. [![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 ✨ diff --git a/apps/ssr/src/app/app.component.html b/apps/ssr/src/app/app.component.html index 41ad2b4..9fbc604 100644 --- a/apps/ssr/src/app/app.component.html +++ b/apps/ssr/src/app/app.component.html @@ -3,7 +3,7 @@

{{ title }}

Dashboard Heroes - + diff --git a/apps/ssr/src/app/app.module.ts b/apps/ssr/src/app/app.module.ts index b77a2d4..18225dd 100644 --- a/apps/ssr/src/app/app.module.ts +++ b/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. diff --git a/apps/ssr/tsconfig.json b/apps/ssr/tsconfig.json index 02add21..16e5a12 100644 --- a/apps/ssr/tsconfig.json +++ b/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 } } diff --git a/docs/README.md b/docs/README.md index b9356da..051b6e3 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,6 +1,6 @@ # xng-breadcrumb -> A lightweight, declarative and configurable breadcrumbs solution for Angular 6 and beyond. +> A lightweight, declarative and dynamic breadcrumbs solution for Angular 6 and beyond. [![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 ✨ diff --git a/docs/_sidebar.md b/docs/_sidebar.md index 3da5fd3..67da0b6 100644 --- a/docs/_sidebar.md +++ b/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 diff --git a/docs/static-breadcrumb.md b/docs/declarative-breadcrumbs.md similarity index 58% rename from docs/static-breadcrumb.md rename to docs/declarative-breadcrumbs.md index 3198cd4..5938162 100644 --- a/docs/static-breadcrumb.md +++ b/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 { diff --git a/docs/dynamic-breadcrumb.md b/docs/dynamic-breadcrumbs.md similarity index 98% rename from docs/dynamic-breadcrumb.md rename to docs/dynamic-breadcrumbs.md index 8be9d37..a353e10 100644 --- a/docs/dynamic-breadcrumb.md +++ b/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 diff --git a/docs/quickstart.md b/docs/quickstart.md index 0fc1a7b..ac61d72 100644 --- a/docs/quickstart.md +++ b/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,7 +23,7 @@ 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 @@ -31,4 +31,4 @@ Usually added in app.component.html 🎉🎉 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.