Enterprise-ng: Breadcrumb: component breaks template interpolation

[bthharper]

Describe the bug

Adding string interpolation to an element inside a breadcrumb does not work when using soho-breadcrumb.

For example:

html
<nav soho-breadcrumb>
    <li>
      <span>{{someData}}</span>
    </li>
</nav>

Does not display updates to the someData property. Changing to use simple markup does:

<nav class="breadcrumb">
  <ol class="breadcrumb-list">
    <li>
      <span>{{someData}}</span>
     </li>
   </ol>
 </nav>
 <button soho-button (click)="increment()">Increment</button>

private _i = 1;

public get someData() {
  return this._i;
}

public increment() {
  console.log(`Incrementing ${this._i++}`);
}

To Reproduce
Steps to reproduce the behavior:

1. Check out the latest repo for ids-enterprise-ng.
2. Apply the attached GIT patch breadcrumb.patch.zip
3. Build (npm run build)
4. Run (npm run start)
5. Navigate (http://localhost:4200/ids-enterprise-ng-demo/breadcrumb)

Clicking the "Increment" button does not update the first breadcrumb but does the second.

Expected behavior

Both breadcrumbs should be updated.

Version

• ids-enterprise-ng: 8.0.2

Screenshots
If applicable, add screenshots to help explain your problem.

Platform

• Device (if applicable) Desktop
• OS Version: Windows 10 and macOS 10.15.7
• Browser Name: Edge Chromium and Safari
• Browser Version: Latest

Additional context

I believe this is due to underlying widget adding a button under the nav element.

Also, I tried adding a soho-breadcrumb-list component which sets the class for the order list to make sure the markup is HTML compliant. This did not fix the issue, so assume it might be related to the button.

Using the component without these calls in the AfterViewInit resolved the issue:

ngAfterViewInit() {
    this.ngZone.runOutsideAngular(() => {
      this.jQueryElement = jQuery(this.element.nativeElement);
      // this.jQueryElement.breadcrumb(this.options);
      //  this.breadcrumbAPI = this.jQueryElement.data('breadcrumb');
    });
  }

This leads me to believe there is something occurring in the underlying widget which is breaking angular links to the page elements.

[bthharper]

Also - the EP widget seems to be converting all the list item's content into anchors, e.g.

<span>{{someData}}</span>

is becoming

<a id="" class="hyperlink hide-focus" tabindex="0">1</a>

[bthharper]

It looks like angular is loosing track of its templates as the EP widget is deleting the generated markup,

// If breadcrumbs are present, they are processed for settings and removed.

[tmcconechy]

So is the suggest to just update our examples to use the full markup approach?

[bthharper]

@tmcconechy - not sure - effectively there are two problems:

1. The soho-breadcrumb does not integrate with angular due to the dynamic creation of the html (which angular does not see) - similar to the problems we had with data grid and custom editors and formatters not working with angular concepts.
   2.The EP widget turns all list items into hyper links when some are not.

In my application at the moment, I have reverted to the standard markup without any component or EP widget integration. I wonder if there is a case leave the original HTML in place (if it exists) and just manipulate it rather than generating breadcrumb models?

[tmcconechy]

I think perhaps for the angular case we just need to

a) let the original markup work
b) let a full expanded markup work (as this wont "correct" the DOM)

Probably an issue for @EdwardCoyle when he can get to it

[bthharper]

For now I am using the following markup:

<soho-toolbar-flex-section [isTitle]="true">
  <nav class="breadcrumb">
    <ol class="breadcrumb-list">
      <li class="breadcrumb-item">
        <a soho-hyperlink (click)="navigateToUsers($event)">{{'UserFormUsersNavigationLabel' | sohoTranslate}}</a>
      </li>
      <li class="breadcrumb-item current">
        <a soho-hyperlink id="new-user-breadcrumb">{{name}}</a>
      </li>
    </ol>
  </nav>
</soho-toolbar-flex-section>

This mostly works okay, and gives the same styling as the breadcrumb widget.

Is there an option to have a non hyperlink with the same text styling but without the hover? the disabled option looks too greyed out.

[tmcconechy]

Yes, just replace the <a> tag with a <span> and it will work.

[bthharper]

If I do that the styling is all out.

[tmcconechy]

Works in EP when i try it.

[bthharper]

Ummmm .... same in NG (as in it works in NG). Must be some quirky styling in our app. Let me check it out.

[bthharper]

Maybe it's the flex-toolbar, but a min-height is being added:

[bthharper]

Which causes:

[bthharper]

Using a hyperlink I get:

[tmcconechy]

Ok, i bet the layout bug is to do with it being in a toolbar with spans moving around there. Might need some css to counter it when its in a toolbar

[bthharper]

Yeah - maybe a flex-toolbar thing.

[tmcconechy]

Will try and get to it next sprint

[CindyMercadoReyes]

This issue is now resolved.