ionic5 menu submenu functionality

-
<ion-app>
  <ion-split-pane contentId="main-content">
    <ion-menu contentId="main-content" type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-grid style="background-image: linear-gradient(45deg, #165997, #144e8d);
          color: #fff;">
            <ion-row>
              <ion-col size="3">
                <ion-avatar>
                    <img src="http://207.38.84.105/Nakhas/public/images/fromserver/sidelogo.png" alt="" class="imagehead" style="width:100%;">
         
                </ion-avatar>
                
              </ion-col>
              <ion-col>
                  <p style="font-size:18px;font-weight:bold;margin-top: 27px;" class="imagetext">NAKHAS</p>
                </ion-col>
            </ion-row>
          </ion-grid>
         
        
        </ion-toolbar>
      </ion-header>
      <ion-content>

<div *ngFor = "let p of appPages">
    <ion-menu-toggle auto-hide="false" *ngIf="p.url">
        <ion-item style="border: none;" routerDirection="root" [routerLink]="[p.url]" routerLinkActive="active">
            <ion-icon slot="start" [name]="p.icon" color="secondary"></ion-icon>
            <ion-label color="secondary">
              {{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="caret-forward-outline" color="secondary" *ngIf ="!p.open"></ion-icon>
      <ion-icon slot="start" name="caret-down-outline" color="secondary" *ngIf ="p.open"></ion-icon>
      <ion-label color="secondary">
            {{p.title}}
          </ion-label>  
    </ion-item>
    <ion-list *ngIf="p.open">
      <ion-menu-toggle auto-hide="false" >
        <ion-item style="margin-left: 50px;" *ngFor="let sub of p.children" routerDirection="root" [routerLink]="sub.url" routerLinkActive="active">
          <ion-icon slot="start" [name]="sub.icon" color="secondary"></ion-icon>
          <ion-label color="secondary">
            {{sub.title}}
          </ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>
  </div>   
     
      </ion-content>
    
    </ion-menu>
    <ion-router-outlet id="main-content"></ion-router-outlet>
    
  </ion-split-pane>

</ion-app>

public appPages = [
    {
      title: 'Home',
      url: '/',
      icon: 'home'
    },
    // {
    //   title: 'About',
    //   url: '/aboutus',
    //   icon: 'home'
    // },
    {
      title: "About Us",
      icon: 'home',
      children: [
        {
          title: "Over View",
          url: '/over-view',
          image:'/assets/images/about/view.png',
          // icon: 'home'
        },
        {
          title: "Mission",
          url: '/mission',
          image:'/assets/images/about/mission.png',
          // icon: 'add-circle'
        },
        {
          title: "Vision",
          url: '/vision',
          image:'/assets/images/about/vission.png',
          // icon: 'logo-vimeo'
        },
      
        {
          title: "Approach",
          url: '/approach',
          image:'/assets/images/about/apporach.png',
          // icon: 'home'
        }
      ]
    },
    {
      title: 'Our Work',
      url: '/ourwork',
      icon: 'briefcase'
    },
    {
      title: 'Campaigns',
      url: '/services',
      icon: 'microphone'
    },
    {
      title:'Get Involved',
      url: '/services',
      icon: 'information-circle-outline'
    },
    {
      title:'Media Centre',
      url: '/gallery',
      icon: 'film'
    },
    
    {
      title: 'Events',
      url: '/events',
      icon: 'trophy'
    },
  
    {
      title: 'Gallery',
      url: '/gallery',
      icon: 'images'
    },
    {
      title: 'Contact Us',
      url: '/contactus',
      icon: 'contact'
    },
  ];

Comments

Post a Comment

Popular posts from this blog

Your app currently targets API level 27 and must target at least API level 28 to ensure it is built on the latest APIs optimized for security and performance. Change your app's target API level to at least 28

-
https://stackoverflow.com/questions/51466168/android-playstore-warning-your-app-currently-targets-api-level-25 ionic cordova platform rm android ionic cordova platform add android@7 . 1.4 (Or) prefer below code first, using ionic3 <preference name = "android-targetSdkVersion" value = "28" />
Read more

ionic project creation

-
ionic start myApp tabs  ionic generate page contact for services ::: ionic generate provider httpclientModule in ionic3 https://www.npmjs.com/package/ngx-http-client https://www.tutorialspoint.com/ionic/ionic_camera.htm import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { toPromise } from 'rxjs/operator/toPromise'; import { AlertController, MenuController, ToastController } from 'ionic-angular'; /* Generated class for the CallsProvider provider. See https://angular.io/guide/dependency-injection for more info on providers and Angular DI. */ @Injectable() export class CallsProvider { SERVER_IP=" http://209.126.98.38/EverestHome/public/api/v1/ " constructor(public http: HttpClient) { console.log('Hello CallsProvider Provider'); } post(api: string , requestData: any) { debugger; console.log(requestData); return this.http.po...
Read more

change root user in ubuntu

-
Run  sudo <command>  and type in your login password, if prompted, to run only that instance of the command as root. Next time you run another or the same command without the  sudo  prefix, you will not have root access. Run  sudo -i . This will give you an interactive root shell. Note that the  $  at the end of your prompt has changed to a  # , indicating that you have root access. From here you can run any sequence of commands as root, or run the command  exit  to leave the root shell. Use the  su  (substitute user) command to get a root shell. This is effectively the same as using  sudo -i . Note that when you use this command it will ask for the root password and not your login password. These are not the same. You may have to set or change the root password by running  sudo passwd root  first. Run  sudo -s . This gives you root access, but maintains your current SHELL. Shell specific s...
Read more