Web app with a menu inside a menu

Ionic Framework Ionic Angular
1

Hello everyone, I’m trying to make a where some of the items on the menu will have sub menus on them, but nothing is showing on the Menu, Probably is something with the routing but I can’t find what

app.component.html

<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content">
      <ion-header>
        <ion-toolbar>
          <ion-img src="/assets/icon/logo.jpg"></ion-img>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <div *ngFor="let p of pages;let i = index"></div>
        <ion-menu-toggle *ngIf="p.url">
          <ion-item [routerLink]="[p.url]" routerDirection="root" routerLinkActive="active" detail="false">
            <ion-icon slot="start" name="home"></ion-icon>
            <ion-label>{{p.title}}</ion-label>
          </ion-item>
        </ion-menu-toggle>
        <ion-item button *ngIf="p.children?.length>0" (click)="p.open = !p.open" [class.active-parent]="p.open"
          detail="false">
          <ion-icon slot="start" name="arrow-forward" *ngIf="!p.open"></ion-icon>
          <ion-icon slot="start" name="arrow-down" *ngIf="p.open"></ion-icon>
          <ion-label>{{p.title}}</ion-label>
        </ion-item>

        <ion-list *ngIf="p.open">
          <ion-menu-toggle>
            <ion-item *ngFor="let sub of p.children" [routerLink]="sub.url" routerDirection="root"
              routerLinkActive="active">
              <ion-label>{{sub.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="main-content"></ion-router-outlet>
  </ion-split-pane>
</ion-app>

app.component.ts

import { Component } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  public pages=[
    {title:'Home', url:'/pages/home'},
    {title:'Papelaria', url:'/pages/papelaria'},
      {title:'Mini Kits Mesversário(Todos os Temas)', url:'/pages/kits'}
  ];

  selectedPath = '';

  constructor(private router:Router) {
    this.router.events.subscribe((event: RouterEvent) => {
      this.selectedPath = event.url;
    });
   }
}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'papelaria',
    loadChildren: () => import('./pages/papelaria/papelaria.module').then( m => m.PapelariaPageModule)
  },
  {
    path: 'kits',
    loadChildren: () => import('./pages/kits/kits.module').then( m => m.KitsPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Início</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

Any help would be great, thanks in advance

2

This does nothing of any use to you. And you should know, because you seem to apply ngFor in a better way in the lower part of your code :wink:

1 Like
3

This is not ok. Read angular.io on property binding.


[routerLink]="p.url"

is better

p.children?.length

p has no property children, neither property p.open

I think you need to rethink the data structure for the array containing the pages and the subpages. Your code won’t take this from your routes, I suspect.

1 Like
4

Thanks for both replys, you helped me seeing errors I left behind trying to make it work, on app. component, I created a new title, which have a children. And the div one helped me see that I closed the div right after I opened it, which should close after . After I made this changes now the menu show the title Papelaria Basica which I created and have a children.

public pages = [
    { title: 'Home', url: '/pages/home' },
    { title: 'Papelaria', url: '/pages/papelaria' },
    {
      title: 'Papelaria Basica', children: [
        { title: 'Mini Kits Mesversário(Todos os Temas)', url: '/pages/kits' }
      ]
    }
  ];

I later will look into the code again to dicover why the other titles are not showing, but you already helped me a lot, thank you very much.

1 Like
5

Welcome

I bet there is a truckload of examples to be found on this forum

You arent the first to think of submenus