Open lukasmatta opened 1 month ago
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>
@udayvunnam