Link don´t show correctly when use this.router.navigate

[Vladimir]

In my module when i click a button and use

this.router.navigate(['/role']);

In my breadcrumb always show the home not home/role

Somebody knows what's the problem?

<div id="head">

  <app-app-bar (onToogle)="onToogle($event);" ></app-app-bar>

</div>

<div id="maincontent" class="content" style="padding-top:10px;">

  <div class="container-fluid">

    <ejs-breadcrumb [enableNavigation]="true">

    </ejs-breadcrumb>

    <div class="center-align">

        <router-outlet></router-outlet>

    </div>

  </div>

</div>

<ejs-sidebar

  id="default-sidebar"

  #sidebar

  [type]="type"

  [target]="target"

  (created)="onCreated($event)"

  style="visibility: hidden"

>

  <div class="sidebar-header header-cover" style="background-color: #0378d5">

    <div class="image-container" style="padding-top: 5px">

      <div class="sidebar-image text-center">

        <span class="e-avatar e-avatar-large e-avatar-circle">VM</span>

      </div>

    </div>

    <div style="padding: 0 0 5px 0">

      <button

        #defaultButtonLogin

        ejs-button

        cssClass="e-inherit text-white e-block"

      >

        Vladimir Miranda (admin)

      </button>

    </div>

  </div>

  <div class="main-menu">

    <div>

      <!-- Treevie element declaration -->

      <ejs-treeview

        id="main-treeview"

        #treeviewInstance

        [fields]="field"

        expandOn="Click"

      ></ejs-treeview>

    </div>

  </div>

</ejs-sidebar>

[Keerthikaran Venkatachalam]

Hi Vladimir,

We have checked your reported query, using the activeItem property of breadcrumb to achieve your requirements. Please refer to the below code snippet and sample.

<ejs-breadcrumb (click)='clickHandler($event)' [enableNavigation]="true" [(activeItem)]="activeItem">

  <e-breadcrumb-items>

    <e-breadcrumb-item text="Home" url="home"></e-breadcrumb-item>

    <e-breadcrumb-item text="Products" url="/products"></e-breadcrumb-item>

    <e-breadcrumb-item text="About" url="/products/about"></e-breadcrumb-item>

    <e-breadcrumb-item text="Team" url="/products/about/team"></e-breadcrumb-item>

  </e-breadcrumb-items>

</ejs-breadcrumb>

 

clickHandler(args: BreadcrumbClickEventArgs) {

    if(args.item) {

      this.router.navigate(args.item.url.split('/'));

    }

  }

 

  private initRoutes(): void {

    this.routesData = this.router.events.subscribe((d) => {

        const route = this.router.url;

        this.activeItem = route === '/' ? 'home': route;

    });

}

Get back to us if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Breadcrumb_bec34316.zip

[Talia Blakemore]

I am also having this issue, but cannot resolve it with active Item. Is there any other advice?

[Prasanth Madhaiyan]

Hi Talia Blakemore,

Based on the shared details, we have reviewed the sample attached in the previous update from this thread. During our testing, both URL changes and clicking on the breadcrumb path navigated to the correct location without any issues.

For your reference, we have attached the sample and screenshot.

Sample: Attached as a zip file. 

Screenshot:

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BreadcrumbSample_3170d8f6.zip