Struggling to create a collapsible menu within my header component in an Angular project, I've hit a snag with proper JSON formatting. The error message that keeps popping up reads:
Error: src/app/components/header/header.component.html:48:49 - error TS2339: Property 'sublinks' does not exist on type '{ title: string; collapsed: boolean; links: { title: string; url: string; sublinks: { title: string; url: string; }[]; }[]; }'.
48 <li *ngFor="let sublink of item.sublinks" class="sublink">
I'm at a loss trying to troubleshoot this issue on my own and am in need of some assistance.
This is what my HTML template looks like:
<li *ngFor="let item of navigationItems; let i = index" class="link">
<a [href]="item.url" class="main-wrapper">{{ item.title }}</a>
<a class="d-inline-block main-wrapper" (click)="toggleCollapse(i)" role="button" [attr.aria-expanded]="!item.collapsed" [attr.aria-controls]="'navCollapse_' + i">
<img *ngIf="item.collapsed" src="./assets/img/icons/plus.svg" alt="plus-icon" class="ms-3">
<img *ngIf="!item.collapsed" src="./assets/img/icons/minus.svg" alt="minus-icon" class="ms-3">
</a>
<div [id]="'navCollapse_' + i" class="collapse link-collapse main-collapse" [class.show]="!item.collapsed">
<ul class="sublink-wrapper">
<li *ngFor="let sublink of item.sublinks" class="sublink">
<a [href]="sublink.url">{{ sublink.title }}</a>
</li>
</ul>
</div>
</li>
And here's the TypeScript code:
export class HeaderComponent {
constructor() { }
navigationState: string = 'out';
navigationItems = [
{
title: 'Lorem ipsum',
collapsed: true,
links: [
{
title: 'Lorem ipsum 1',
url: 'some-url',
sublinks: [
{ title: 'Lorem ispum 1.1', url: 'some url' },
{ title: 'Lorem ispum 1.2', url: 'some url' },
{ title: 'Lorem ispum 1.3', url: 'some url' }
]
},
{
title: 'Lorem ipsum 2',
url: 'some-url',
sublinks: [
{ title: 'Lorem ispum 2.1', url: 'some url' },
{ title: 'Lorem ispum 2.2', url: 'some url' },
{ title: 'Lorem ispum 2.3', url: 'some url' },
{ title: 'Lorem ispum 2.4', url: 'some url' }
]
},
{
title: 'Lorem ipsum 3',
url: 'some-url',
sublinks: [
{ title: 'Lorem ispum 3.1', url: 'some url' },
{ title: 'Lorem ispum 3.2', url: 'some url' },
{ title: 'Lorem ispum 3.3', url: 'some url' }
]
},
{
title: 'Lorem ipsum 4',
url: 'some-url',
sublinks: [
{ title: 'Lorem ispum 4.1', url: 'some url' },
{ title: 'Lorem ispum 4.2', url: 'some url' },
{ title: 'Lorem ispum 4.3', url: 'some url' },
{ title: 'Lorem ispum 4.4', url: 'some url' },
{ title: 'Lorem ispum 4.5', url: 'some url' }
]
},
]
}
];
ngOnInit(): void {
}
toggleCollapse(index: number): void {
this.navigationItems[index].collapsed = !this.navigationItems[index].collapsed;
}
}