Web app with a menu inside a menu

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

1 post - 1 participant

Read full topic