Add support for Angular v18 about xng-breadcrumb HOT 2 OPEN

lukasmatta commented on July 3, 2024 7

Add support for Angular v18

from xng-breadcrumb.

Comments (2)

ceebows commented on July 3, 2024

@udayvunnam

from xng-breadcrumb.

apappas1129 commented on July 3, 2024

Installed "xng-breadcrumb": "^11.0.0", into a fresh Angular 18 project.
Everything seems working except that the xng-breadcrumb class names can't be selected on CSS even with ::ng-deep and with or increased specificity (i.e. adding class into <xng-breadcrumb>).

Example template:
(app.component.html)

<div class="max-screen-width mx-auto py-f-m">
  <xng-breadcrumb class="my-xng-breadcrumb" [separator]="iconTemplate">
    <ng-container *xngBreadcrumbItem="let breadcrumb; let first = first">
      <ng-container>
        @if (first) {
          <span class="iconify material-symbols--home"></span>
          <span class="sr-only">{{ breadcrumb }}</span>
        } @else {
          {{ breadcrumb }}
        }
      </ng-container>
    </ng-container>
  </xng-breadcrumb>

  <ng-template #iconTemplate>
    <span class="iconify material-symbols--chevron-right" aria-hidden="true"></span>
  </ng-template>
</div>

(app.component.css)

/* BUG: xng-class selectors below do not work with or without ::ng-deep.
See  https://udayvunnam.github.io/xng-breadcrumb/#/custom-styles
For now, overriding styles directly on index.html */
::ng-deep {
  /** Even increased specificity here is not working */
  .my-xng-breadcrumb {
    .xng-breadcrumb-separator:first-child {
      display: none;
    }

    .xng-breadcrumb-separator {
      margin: 0;
      background-color: red;
    }
  }
}

Nothing is selected successfully.

I don't know if there must be something done here to make it work on Angular 18 or I'm missing something in the docs so I'm reporting it here.

Adding encapsulation: ViewEncapsulation.None does not help as well.

For now, I wrote my styles directly into index.html for it to work.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MyApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <!-- HACK: ::ng-deep + xng-breadcrumb class selectors doesn't work on Component level css. -->
    <style>
      .xng-breadcrumb-separator:first-child {
        display: none;
      }

      .xng-breadcrumb-separator {
        margin: 0 !important;
      }
    </style>
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>