feat(arc): implement breadcrumb feature #128

vaibhavbhalla2505 · 2025-06-02T16:53:40Z

Description

This PR introduces a reusable breadcrumb component with both static and dynamic rendering support. The component helps users understand their navigation context and easily traverse application routes.

Fixes # (issue)

GH-126

Type of change

Please delete options that are not relevant.

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Intermediate change (work in progress)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

Test A
Test B

Checklist:

Performed a self-review of my own code
npm test passes on your machine
New tests added or existing tests modified to cover all changes
Code conforms with the style guide
API Documentation in code was updated
Any dependent changes have been merged and published in downstream modules

Copilot

Pull Request Overview

This PR adds a reusable breadcrumb feature including a demo introduction component, integrates it into the main app navigation, and exposes it from the component library.

Introduces BreadCrumbIntroductionComponent with static and dynamic examples.
Registers BreadcrumbComponent (standalone) in the AppModule and adds a menu entry.
Implements BreadcrumbService, BreadcrumbComponent, and demo user/document resolvers in the library.

Reviewed Changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
projects/arc/src/app/main/constants/components.constant.ts	Added “Breadcrumb” menu item
projects/arc/src/app/main/bread-crumb-introduction/*/	New demo component, template, and styles for demo
projects/arc/src/app/app.module.ts	Imported and declared standalone `BreadcrumbComponent`
projects/arc/src/app/app-routing.module.ts	Set `data.skipLink` on main route
projects/arc-lib/src/lib/components/index.ts	Exported `breadcrumb.component` from the library
projects/arc-lib/src/lib/components/breadcrumb/*	Added service, interface, standalone component, styles, template, and demo modules

Comments suppressed due to low confidence (2)

projects/arc/src/app/main/bread-crumb-introduction/bread-crumb-introduction.component.html:16

[nitpick] The title attribute says “Copy Routing Code” but this button copies the basic breadcrumb snippet. Update it to something like “Copy Basic Code”.

      (click)="copyCode(basicCode)" title="Copy Routing Code"

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts:15

[nitpick] New BreadcrumbComponent logic isn’t covered by unit tests. Consider adding tests for expansion behavior, input bindings, and service integration.

export class BreadcrumbComponent implements OnInit {

Copilot · 2025-06-11T10:11:41Z

projects/arc/src/app/app.module.ts

@@ -40,6 +40,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
    BrowserAnimationsModule,
    HeaderComponent,
    SidebarComponent,
+    BreadcrumbComponent,


Since BreadcrumbComponent is declared as a standalone component, it should be added to the NgModule's imports instead of declarations to avoid declaration conflicts.

@vaibhavbhalla2505

To move the BreadcrumbComponent from the declarations array to the imports array in the app.module.ts file, you can follow these steps:

Open app.module.ts: Locate and open the file at projects/arc/src/app/app.module.ts in your code editor.

Find the Arrays: Look for the declarations and imports arrays in the @NgModule decorator.

Remove from Declarations: Remove the BreadcrumbComponent entry from the declarations array.

Add to Imports: Add BreadcrumbComponent to the imports array.

Here’s how the modified code should look:

import { NgModule } from '@angular/core'; // Other imports... import { BreadcrumbComponent } from '@project-lib/components/breadcrumb/breadcrumb.component'; @NgModule({ declarations: [ // Other components... HeaderComponent, SidebarComponent, // Remove BreadcrumbComponent from here ], imports: [ BrowserAnimationsModule, HeaderComponent, SidebarComponent, BreadcrumbComponent, // Add BreadcrumbComponent here ], // Other configurations... }) export class AppModule { }

By following these steps, you'll properly integrate the standalone BreadcrumbComponent into your Angular module without causing declaration conflicts.

sir ,its already in imports array

@NgModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
LocalizationModule,
CoreModule,
ThemeModule.forRoot('default'),
OverlayModule,
SelectModule,
GanttModule,
BrowserAnimationsModule,
HeaderComponent,
SidebarComponent,
BreadcrumbComponent,
],
providers: [
TranslationService,
TranslateService,
IconPacksManagerService,
TranslateStore,
SystemStoreFacadeService,
EnvAdapterService,
ApiService,
{
provide: APP_CONFIG,
useValue: environment,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}

Copilot · 2025-06-11T10:11:42Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+  constructor(private readonly breadcrumbService: BreadcrumbService) {}
+  ngOnInit(): void {
+    this.breadcrumbs$.subscribe(breadcrumbs => {
+      console.log('Breadcrumbs:', breadcrumbs);


Logging breadcrumb values on every navigation can clutter the console in production. Consider removing this or wrapping it in a debug flag.

Suggested change

console.log('Breadcrumbs:', breadcrumbs);

if (isDevMode()) {

console.log('Breadcrumbs:', breadcrumbs);

}

resolved sir

Copilot · 2025-06-11T10:11:42Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+  ngOnInit(): void {
+    this.breadcrumbs$.subscribe(breadcrumbs => {
+      console.log('Breadcrumbs:', breadcrumbs);
+    });
+  }


Subscribing without unsubscribing may lead to memory leaks. Consider using the async pipe in the template or managing the subscription lifecycle.

Suggested change

ngOnInit(): void {

this.breadcrumbs$.subscribe(breadcrumbs => {

console.log('Breadcrumbs:', breadcrumbs);

});

}

// Removed the ngOnInit lifecycle method as it is no longer needed.

devyaniofficial · 2025-06-12T12:57:38Z

...cts/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.component.ts

+  templateUrl: './user-title.component.html',
+})
+export class UserTitleComponent {
+  title: any;


devyaniofficial · 2025-06-12T12:59:41Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+  id: string;
+  title: string;
+}
+@Injectable({providedIn: 'root'})


devyaniofficial · 2025-06-12T13:00:11Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+import {Observable} from 'rxjs';
+import {TitleService} from './user-title.service';
+
+export interface Title {


create seperate interface folder

devyaniofficial · 2025-06-12T13:00:24Z

...ects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.resolver.ts

+    const id = route.paramMap.get('id');
+    return this.titleService.getTitleById(id);
+  }
+}


devyaniofficial · 2025-06-12T13:00:31Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

+import {Injectable} from '@angular/core';
+import {Observable, of} from 'rxjs';
+
+@Injectable({providedIn: 'root'})


devyaniofficial · 2025-06-13T06:02:44Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.component.ts

+  imports: [CommonModule, RouterModule],
+})
+export class UserComponent {
+  user: any;


devyaniofficial · 2025-06-13T06:03:01Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

+  id: string;
+  name: string;
+  email: string;
+}


create in separate file

devyaniofficial · 2025-06-13T06:03:52Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user/user.resolver.ts

+  name: string;
+  email: string;
+}
+@Injectable({providedIn: 'root'})


remove root from everywhere and add in appropriate modules

devyaniofficial · 2025-06-13T06:06:09Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+    }
+
+    return breadcrumbs;
+  }


modify this function to keep it clean, readable and remove if else if

devyaniofficial · 2025-06-13T06:06:30Z

projects/arc/src/app/app.module.ts

@@ -40,6 +40,7 @@ import {SidebarComponent} from '@project-lib/components/sidebar/sidebar.componen
    BrowserAnimationsModule,
    HeaderComponent,
    SidebarComponent,
+    BreadcrumbComponent,


resolve this

GH-126

devyaniofficial · 2025-06-16T05:05:51Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

@@ -0,0 +1,9 @@
+export interface User {


user model already exists in the library

done mam,i changed the name

devyaniofficial · 2025-06-16T08:25:31Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title.interface.ts

+  name: string;
+  email: string;
+}
+export interface Title {


use name id model in library core

devyaniofficial · 2025-06-16T08:25:53Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/user-title/user-title.service.ts

+export class TitleService {
+  private readonly titles = TITLES;
+
+  getTitleById(id: string): Observable<any> {


devyaniofficial · 2025-06-16T08:26:38Z

projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.ts

@@ -9,7 +9,7 @@ import { Lead } from '../../../shared/models';
 import { BillingPlanService } from '../../../shared/services/billing-plan-service';
 import { OnBoardingService } from '../../../shared/services/on-boarding-service';

-declare var Stripe: any;
+declare let Stripe: any;



I still see 13-14 places where any is used, fix them

devyaniofficial · 2025-06-16T08:29:29Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.service.ts

+      const paramName = route.routeConfig.path.slice(1);
+      return route.params[paramName] ?? paramName;
+    }
+    return this._toTitleCase(path);


remove so many ifs, use array instead

devyaniofficial · 2025-06-16T08:30:27Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb.component.ts

+  expanded = false;
+  constructor(private readonly breadcrumbService: BreadcrumbService) {}
+  ngOnInit(): void {
+    this.breadcrumbs$.subscribe(breadcrumbs => {


destroy observable for all the observables

devyaniofficial · 2025-06-16T08:32:26Z

projects/arc-lib/src/lib/components/breadcrumb/breadcrumb-demo/mock-data.constants.ts

+export const TITLES = [
+  {id: '1', title: 'Contract.pdf'},
+  {id: '2', title: 'Appointment.pdf'},
+];


use types here

GH-126

vaibhavbhalla2505 requested a review from Tyagi-Sunny June 2, 2025 16:53

vaibhavbhalla2505 self-assigned this Jun 3, 2025

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from b0b35bd to 5c4bd27 Compare June 3, 2025 13:07

vaibhavbhalla2505 requested review from rohit-sourcefuse, Deepika516 and devyaniofficial June 3, 2025 13:08

vaibhavbhalla2505 force-pushed the GH-126 branch from 5c4bd27 to ff4a508 Compare June 9, 2025 05:34

rohit-sourcefuse added the breadcrumb label Jun 9, 2025

rohit-sourcefuse linked an issue Jun 9, 2025 that may be closed by this pull request

Implement Dynamic Breadcrumb Component #126

Open

vaibhavbhalla2505 force-pushed the GH-126 branch from ff4a508 to 8056c69 Compare June 10, 2025 05:48

vaibhavbhalla2505 requested a review from akshatdubeysf June 10, 2025 11:10

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:01

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:04

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:09

This comment was marked as outdated.

Sign in to view

rohit-sourcefuse requested a review from Copilot June 10, 2025 12:10

This comment was marked as outdated.

Sign in to view

vaibhavbhalla2505 force-pushed the GH-126 branch 2 times, most recently from d38c74d to 30bb2c2 Compare June 11, 2025 05:56

rohit-sourcefuse requested a review from Copilot June 11, 2025 10:10

Copilot AI reviewed Jun 11, 2025

View reviewed changes

vaibhavbhalla2505 force-pushed the GH-126 branch from 30bb2c2 to b10cd1c Compare June 12, 2025 06:32

devyaniofficial requested changes Jun 13, 2025

View reviewed changes

vaibhavbhalla2505 force-pushed the GH-126 branch from b10cd1c to a876cf9 Compare June 13, 2025 09:16

vaibhavbhalla2505 requested a review from devyaniofficial June 13, 2025 09:18

feat(arc): implement breadcrumb feature

3f9dda5

GH-126

vaibhavbhalla2505 force-pushed the GH-126 branch from a876cf9 to 3f9dda5 Compare June 13, 2025 09:24

devyaniofficial requested changes Jun 16, 2025

View reviewed changes

vaibhavbhalla2505 requested a review from devyaniofficial June 16, 2025 10:52

vaibhavbhalla2505 force-pushed the GH-126 branch from 653ce83 to 9d7ac29 Compare June 16, 2025 11:03

feat(arc): implement breadcrumb feature

51af24a

GH-126

vaibhavbhalla2505 force-pushed the GH-126 branch from 9d7ac29 to 51af24a Compare June 16, 2025 11:04

feat(arc): implement breadcrumb feature #128

Are you sure you want to change the base?

feat(arc): implement breadcrumb feature #128

Uh oh!

Conversation

vaibhavbhalla2505 commented Jun 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of change

How Has This Been Tested?

Checklist:

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 11, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vaibhavbhalla2505 commented Jun 2, 2025 •

edited

Loading