Skip to content

release 20.2.0 #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tim-fabian merged 2 commits into from
Feb 8, 2026
Merged

release 20.2.0 #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0ed6dd
require id for elements
tim-fabian Feb 8, 2026
d306cca
Merge pull request #93 from Service-Soft/require-id-for-elements
tim-fabian Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,617 changes: 1,216 additions & 1,401 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion projects/ngx-material-navigation-showcase/src/app/app.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export class AppComponent implements AfterContentChecked {
this.onResize();
}

@HostListener('window:resize', ['$event'])
@HostListener('window:resize')
onResize(): void {
if (this.footer) {
this.footerHeight = this.footer.nativeElement.offsetHeight;
Expand Down
6 changes: 6 additions & 0 deletions projects/ngx-material-navigation-showcase/src/app/footer-rows.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const footerRows: FooterRow[] = [
{
elements: [
{
id: 'footer-logo',
type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
height: 100,
width: 100,
Expand All @@ -19,22 +20,26 @@ export const footerRows: FooterRow[] = [
{
elements: [
{
id: 'footer-title',
type: NavElementTypes.TITLE,
title: 'Test Title'
},
{
id: 'footer-text',
type: NavElementTypes.TEXT,
paragraphs: [
// eslint-disable-next-line stylistic/max-len
'This is an example text for the ngx-mat-navigation-footer. This is an example text for the ngx-mat-navigation-footer. This is an example text for the ngx-mat-navigation-footer.'
]
},
{
id: 'footer-custom',
type: NavElementTypes.CUSTOM,
component: CustomComponent,
position: 'center'
},
{
id: 'footer-title-right',
type: NavElementTypes.TITLE,
title: 'Test Title Right',
position: 'right'
Expand All @@ -44,6 +49,7 @@ export const footerRows: FooterRow[] = [
{
elements: [
{
id: 'footer-copyright',
type: NavElementTypes.TITLE,
title: 'Copyright',
position: 'center'
Expand Down
18 changes: 18 additions & 0 deletions projects/ngx-material-navigation-showcase/src/app/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
{
elements: [
{
id: 'nav-logo',
type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
url: 'https://placehold.co/400x400',
height: 50,
Expand All @@ -22,6 +23,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
condition: conditionWithInjection
},
{
id: 'nav-logo-2',
type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
url: 'https://placehold.co/400x400',
height: 50,
Expand All @@ -31,6 +33,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
}
},
{
id: 'nav-title-with-link',
type: NavElementTypes.TITLE_WITH_INTERNAL_LINK,
title: 'Showcase Project',
link: {
Expand All @@ -39,10 +42,12 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
collapse: 'sm'
},
{
id: 'nav-title',
type: NavElementTypes.TITLE,
title: 'Title'
},
{
id: 'nav-home-link',
type: NavElementTypes.INTERNAL_LINK,
name: 'Home',
icon: faHome,
Expand All @@ -54,6 +59,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
collapse: 'md'
},
{
id: 'nav-scrolling-link',
type: NavElementTypes.INTERNAL_LINK,
name: 'Scrolling',
route: {
Expand Down Expand Up @@ -81,10 +87,12 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
collapse: 'md'
},
{
id: 'nav-menu',
type: NavElementTypes.MENU,
name: 'Menu',
elements: [
{
id: 'nav-menu-home-link',
type: NavElementTypes.INTERNAL_LINK,
name: 'Home',
icon: faHome,
Expand All @@ -95,6 +103,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
}
},
{
id: 'nav-menu-logo',
type: NavElementTypes.IMAGE_WITH_INTERNAL_LINK,
url: 'https://placehold.co/400x400',
height: 50,
Expand All @@ -104,34 +113,40 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
}
},
{
id: 'nav-menu-title-link',
type: NavElementTypes.TITLE_WITH_INTERNAL_LINK,
title: 'Showcase Project',
link: {
route: 'home'
}
},
{
id: 'nav-menu-reload-page-button',
type: NavElementTypes.BUTTON,
name: 'Reload Page',
icon: faRotateRight,
action: () => location.reload(),
position: 'right'
},
{
id: 'nav-menu-custom',
type: NavElementTypes.CUSTOM,
component: CustomComponent,
closeSidenavOnClick: true,
closeMenuOnClick: true
},
{
id: 'nav-menu-sub-menu-1',
type: NavElementTypes.MENU,
name: 'Sub Menu #1',
elements: [
{
id: 'nav-menu-sub-menu-1-custom',
type: NavElementTypes.CUSTOM,
component: CustomComponent
},
{
id: 'nav-menu-sub-menu-1-internal-link',
type: NavElementTypes.INTERNAL_LINK,
name: 'Link',
route: 'home'
Expand All @@ -143,6 +158,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
position: 'center'
},
{
id: 'nav-blog-link',
type: NavElementTypes.INTERNAL_LINK,
name: 'Blog',
route: {
Expand All @@ -152,6 +168,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
}
},
{
id: 'nav-reload-page-button',
type: NavElementTypes.BUTTON,
name: 'Reload Page',
icon: faRotateRight,
Expand All @@ -164,6 +181,7 @@ export const navbarRows: NavbarRow<NavRoute>[] = [
{
elements: [
{
id: 'nav-row-2-custom',
type: NavElementTypes.CUSTOM,
component: CustomComponent,
collapse: 'md',
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-material-navigation",
"version": "20.1.3",
"version": "20.2.0",
"license": "MIT",
"repository": {
"url": "https://github.com/Service-Soft/ngx-material-navigation"
Expand Down
4 changes: 2 additions & 2 deletions projects/ngx-material-navigation/src/components/breadcrumbs/breadcrumbs.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<nav id="breadcrumbs">
@for (bc of navService.breadcrumbs; track $index) {
@for (bc of navService.breadcrumbs; track bc.route) {
<nav-internal-link
[class.first]="$first"
[isBreadcrumb]="true"
[isSidenavElement]="false"
[isMenuItem]="false"
[element]="{ type: NavElementTypes.INTERNAL_LINK, route: bc.route, name: bc.name, icon: bc.icon, ariaLabel: bc.ariaLabel }"
[element]="{ id: bc.route, type: NavElementTypes.INTERNAL_LINK, route: bc.route, name: bc.name, icon: bc.icon, ariaLabel: bc.ariaLabel }"
>
</nav-internal-link>
@if (!$last) {
Expand Down
6 changes: 3 additions & 3 deletions projects/ngx-material-navigation/src/components/footer/footer.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@
@for (row of footerRows; track $index) {
<div class="footer-row">
<div class="footer-col" id="left">
@for (element of getFooterElements(row, 'left'); track $index) {
@for (element of getFooterElements(row, 'left'); track element.id) {
<ngx-mat-navigation-element [element]="element"></ngx-mat-navigation-element>
}
</div>
<div class="footer-col" id="center">
@for (element of getFooterElements(row, 'center'); track $index) {
@for (element of getFooterElements(row, 'center'); track element.id) {
<ngx-mat-navigation-element [element]="element"></ngx-mat-navigation-element>
}
</div>
<div class="footer-col" id="right">
@for (element of getFooterElements(row, 'right'); track $index) {
@for (element of getFooterElements(row, 'right'); track element.id) {
<ngx-mat-navigation-element [element]="element"></ngx-mat-navigation-element>
}
</div>
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/src/components/nav-element/nav-element.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@

<ng-template #menu>
<div class="menu" cdkMenu [class.subMenu]="internalIsMenuItem" [style.min-width.px]="menuWidth">
@for (menuElement of elementMenu.elements; track $index) {
@for (menuElement of elementMenu.elements; track menuElement.id) {
<ngx-mat-navigation-element
[isSidenavElement]="internalIsSidenavElement"
[isMenuItem]="true"
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/src/components/nav-element/nav-element.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ fa-icon {
padding: 16px;
box-sizing: border-box;
background-color: white;
z-index: 3;
z-index: 30;
display: flex;
flex-direction: column;
gap: 10px;
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/src/components/nav-element/nav-element.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@ export class NavElementComponent implements AfterContentChecked, OnInit {
/**
* Updates the width of the menu to the value of its button.
*/
@HostListener('window:resize', ['$event'])
@HostListener('window:resize')
onResize(): void {
if (this.menuButtonElement) {
this.menuWidth = this.menuButtonElement.nativeElement.offsetWidth;
Expand Down
2 changes: 1 addition & 1 deletion .../ngx-material-navigation/src/components/nav-element/text/nav-text/nav-text.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
@for (paragraph of elementValue.paragraphs; track $index) {
@for (paragraph of elementValue.paragraphs; track paragraph) {
<div>{{paragraph}}</div>
}
10 changes: 5 additions & 5 deletions projects/ngx-material-navigation/src/components/navbar/navbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@
@if (getNavbarElements(row, 'left').length || getNavbarElements(row, 'center').length || getNavbarElements(row, 'right').length || $index === 0) {
<div class="toolbar-row">
<div class="toolbar-col">
@for (element of getNavbarElements(row, 'left'); track $index) {
@for (element of getNavbarElements(row, 'left'); track element.id) {
<ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
}
</div>
<div class="toolbar-col">
@for (element of getNavbarElements(row, 'center'); track $index) {
@for (element of getNavbarElements(row, 'center'); track element.id) {
<ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
}
</div>
<div class="toolbar-col">
@for (element of getNavbarElements(row, 'right'); track $index) {
@for (element of getNavbarElements(row, 'right'); track element.id) {
<ngx-mat-navigation-element [class]="getElementClass(element)" [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
}
@if ($index === 0) {
Expand All @@ -28,7 +28,7 @@
@if (navService.anchorRow.elements.length) {
<div class="anchor-row">
<div class="anchor-row-content">
@for (element of navService.anchorRow.elements; track $index) {
@for (element of navService.anchorRow.elements; track element.id) {
<ngx-mat-navigation-element [element]="element" [(sidenavOpened)]="sidenavOpened" (click)="clickSidenavElement(element)"></ngx-mat-navigation-element>
}
</div>
Expand All @@ -48,7 +48,7 @@
[style.top.px]="this.navbar.nativeElement.offsetHeight"
[style.height.px]="this.content.nativeElement.offsetHeight"
>
@for (element of sidenavElements; track $index) {
@for (element of sidenavElements; track element.id) {
<div class="sidenav-row">
<ngx-mat-navigation-element
[class]="getElementClass(element)"
Expand Down
4 changes: 2 additions & 2 deletions projects/ngx-material-navigation/src/components/navbar/navbar.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ ngx-mat-navigation-element {
flex-direction: column;
gap: 10px;
overflow: scroll;
z-index: 2;
z-index: 20;
box-sizing: border-box;

transform: translateX(100%);
Expand All @@ -90,7 +90,7 @@ ngx-mat-navigation-element {
left: 0;
bottom: 0;
background-color: rgba(0,0,0,0.45);
z-index: 1;
z-index: 10;

opacity: 0;
transition: opacity 300ms;
Expand Down
3 changes: 2 additions & 1 deletion projects/ngx-material-navigation/src/components/navbar/navbar.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export class NgxMatNavigationNavbarComponent implements AfterContentChecked {
private readonly breakpointObserver: BreakpointObserver
) {
this.burgerMenu = {
id: 'burger-menu',
type: NavElementTypes.BUTTON_FLAT,
name: '',
icon: burgerMenuIcon,
Expand Down Expand Up @@ -242,7 +243,7 @@ export class NgxMatNavigationNavbarComponent implements AfterContentChecked {
* Updates the current screen width and filters the sidenav elements accordingly.
* @throws When no height data is provided or the data is invalid.
*/
@HostListener('window:resize', ['$event'])
@HostListener('window:resize')
onResize(): void {
this.updateHeights();
this.sidenavOpened = false;
Expand Down
4 changes: 4 additions & 0 deletions projects/ngx-material-navigation/src/models/nav-element.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export enum NavElementTypes {
* The abstract base class of any nav element.
*/
export abstract class BaseNavElement {
/**
* The id of the element.
*/
id!: string;
/**
* The type of the element.
*/
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/src/models/nav-image.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export interface NavImageWithInternalLink<RouteType extends Route = NavRoute> ex
/**
* The link object. Contains the route and whether or not it should be opened in a new tab.
*/
link: Omit<NavInternalLink<RouteType>, 'name' | 'icon' | 'type' | 'collapse' | 'position'>,
link: Omit<NavInternalLink<RouteType>, 'name' | 'icon' | 'type' | 'collapse' | 'position' | 'id'>,
/**
* The img alt tag value.
*/
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-material-navigation/src/models/nav-title.model.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export interface NavTitleWithInternalLink<RouteType extends Route = NavRoute> ex
/**
* The link object. Contains the route and whether or not it should be opened in a new tab.
*/
link: Omit<NavInternalLink<RouteType>, 'name' | 'icon' | 'type' | 'collapse' | 'position'>
link: Omit<NavInternalLink<RouteType>, 'name' | 'icon' | 'type' | 'collapse' | 'position' | 'id'>
}

/**
Expand Down
1 change: 1 addition & 0 deletions projects/ngx-material-navigation/src/services/nav.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export class NgxMatNavigationService {
get anchorRow(): NavbarRow {
const elements: NavInternalLink[] = this.anchorsSubject.value.map(a => {
return {
id: a.name,
type: NavElementTypes.INTERNAL_LINK,
route: this.currentRoute,
collapse: 'never',
Expand Down