How to add Side bar menu in Ionic 4 blank project

How to add Sidemenu bar in Ionic 4 application

In this post, we will see how can we add SideDrawer in Ionic 4 blank project.



Step 1 :-
first create a blank ionic project using below command :-
ionic start myApp blank


Step 2 :-
now I will create 4 pages which name will be "home", "profile", "notification", "setting" using below command :-

ionic g page home
ionic g page profile
ionic g page notification
ionic g page setting

app-routing.module.ts :-

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'profile', loadChildren: './profile/profile.module#ProfilePageModule' },
  { path: 'notification', loadChildren: './notification/notification.module#NotificationPageModule' },
  { path: 'setting', loadChildren: './setting/setting.module#SettingPageModule' }

];

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


Step 3 :-
now I will open "app.component.html" file to write sidebar menu logic.

app.component.html :-

<ion-app>
  <ion-menu side="start" menuId="m1">
<ion-header>
  <ion-toolbar>
<ion-title>My Title</ion-title>
  </ion-toolbar
</ion-header>
<ion-content>
  <ion-list>
<ion-menu-toggle>
  <ion-item lines="none" routerLink="/profile">
<ion-icon name="contact" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
  </ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
  <ion-item lines="none" routerLink="/notification">
<ion-icon name="notifications" slot="start"></ion-icon>
<ion-label>Notification</ion-label>
  </ion-item>
</ion-menu-toggle>
<ion-menu-toggle>
  <ion-item lines="none" routerLink="/setting">
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Setting</ion-label>
  </ion-item>
</ion-menu-toggle>
  </ion-list>
</ion-content>
  </ion-menu>
  <ion-router-outlet main></ion-router-outlet>
</ion-app>


Step 4 :-
now I will add menu button in "home.page.html" file.

home.page.html :-

<ion-header>
  <ion-toolbar>
<ion-buttons slot="start">
  <ion-menu-button menu="m1"></ion-menu-button>
</ion-buttons>
<ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content></ion-content>


Step 5 :-
If you want that only "home" page have menu button but you do not want menu button in "profile", "notification", "setting" pages then follow below steps :-

profile.page.ts :-

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
  constructor(public menuCtrl:MenuController) {
this.menuCtrl.swipeEnable(false,"m1");
  }
  ngOnInit() {
  }
}


notification.page.ts :-

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-notification',
  templateUrl: './notification.page.html',
  styleUrls: ['./notification.page.scss'],
})
export class NotificationPage implements OnInit {
  constructor(public menuCtrl:MenuController) {
this.menuCtrl.swipeEnable(false,"m1");
  }
  ngOnInit() {
  }
}


setting.page.ts :-

import { Component, OnInit } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'app-setting',
  templateUrl: './setting.page.html',
  styleUrls: ['./setting.page.scss'],
})
export class SettingPage implements OnInit {
  constructor(public menuCtrl:MenuController) {
this.menuCtrl.swipeEnable(false,"m1");
  }
  ngOnInit() {
  }
}

Comments

Post a Comment

Popular posts from this blog

Call CRUD(GET, POST, PUT, DELETE) API using WebClient in c#

          Here We will see how we can call all CRUD methods (GET, PUT, POST, DELETE) with the help of WebClient in c#. you will need to add reference of "System.Web.Extensions" assembly to your project. 1. Call POST API :-     string apiUrl = "http://localhost:26404/api/POSTAPI";     object input = new     {         Name = txtName.Text.Trim()     };     string inputJson = (new JavaScriptSerializer()).Serialize(input);     WebClient client = new WebClient();     client.Headers["Content-type"] = "application/json";     client.Encoding = Encoding.UTF8;     string json = client.UploadString(apiUrl + "/PostCustomers","POST", inputJson); 2. Call GET API :-     string apiUrl = "http://localhost:26404/api/GETAPI";     WebClient client = new WebClient();     client.Headers["Content-type"] = "app...
Read more

Asp.Net MVC 5 authentication and authorization using claims principal

Asp.Net MVC 5 authentication and authorization using claims principal :- Step1 : File -> New Project -> Asp.Net Web Application -> Asp.Net 4.5.2 Templates Choose empty MVC project template Step2 : Install following nuget packages Microsoft.AspNet.Identity.Core Microsoft.AspNet.Identity.Owin Microsoft.Owin Microsoft.Owin.Host.SystemWeb Microsoft.Owin.Security Microsoft.Owin.Security.Cookies Microsoft.Owin.Security.OAuth Owin Step3 : Create a Owin Startup class and decorate with assembly attribute OwinStartup. using Microsoft.AspNet.Identity; using Microsoft.Owin; using Microsoft.Owin.Security.Cookies; using Owin; [assembly: OwinStartup(typeof(AspNetMVC5Authorization.Startup))]  // here "AspNetMVC5Authorization" is the name of project namespace AspNetMVC5Authorization { public class Startup { public void Configuration(IAppBuilder app) { ConfigureAuthenticat...
Read more