{"id":1150,"date":"2019-02-14T12:31:50","date_gmt":"2019-02-14T07:01:50","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1150"},"modified":"2019-02-14T12:31:50","modified_gmt":"2019-02-14T07:01:50","slug":"how-create-side-menu-using-ionic","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/","title":{"rendered":"How to create a side menu Using Ionic from blank?"},"content":{"rendered":"

Ionic is completely\u00a0an open source SDK for the hybrid mobile app, It uses Cordova plugins to gain access to the host operating system features such as Camera, GPS, etc. We can build our apps, and customize them for Android, iOS, Windows, or modern browsers. The ionic framework is famous for\u00a0its strong command-line interface which helps developers to create projects with a simple command to add Cordova plugins and front-end packages such as enable push notifications, generate app Icons, and Splash screens, etc.<\/p>\n

We can install ionic by following this process:<\/p>\n

1. npm install -g ionic
\n2. ionic start test-app(use your folder name) blank
\n3. cd test-app(use your folder name)
\n4. ionic serve<\/p>\n

In this example, we are implementing a sidemenu using Ionic from blank. Here is a sample code for implementating Sidemenu using Ionic:<\/p>\n

home.page.html<\/strong>
\n<ion-header>
\n<ion-toolbar color=”primary”>
\n<ion-buttons slot=”start”>
\n<ion-menu-toggle>
\n<ion-button>
\n<ion-icon slot=”icon-only” name=”menu”><\/ion-icon>
\n<\/ion-button>
\n<\/ion-menu-toggle>
\n<\/ion-buttons>
\n<ion-title start>Ionic Side Menu<\/ion-title>
\n<\/ion-toolbar>
\n<\/ion-header><\/p>\n

<ion-content padding><\/p>\n

<\/ion-content><\/p>\n

app.component.html<\/strong>
\n<ion-app>
\n<ion-menu side=”start” menuId=”main”>
\n<ion-header>
\n<ion-toolbar color=”primary”>
\n<ion-title>Menu<\/ion-title>
\n<\/ion-toolbar>
\n<\/ion-header>
\n<ion-content>
\n<ion-list>
\n<ion-item>Menu Item<\/ion-item>
\n<ion-item>Menu Item<\/ion-item>
\n<ion-item>Menu Item<\/ion-item>
\n<ion-item>Menu Item<\/ion-item>
\n<ion-item>Menu Item<\/ion-item>
\n<\/ion-list>
\n<\/ion-content>
\n<\/ion-menu>
\n<ion-router-outlet main><\/ion-router-outlet>
\n<\/ion-app><\/p>\n","protected":false},"excerpt":{"rendered":"

Ionic is completely\u00a0an open source SDK for the hybrid mobile app, It uses Cordova plugins to gain access to the host operating system features such as Camera, GPS, etc. We can build our apps, and customize them for Android, iOS, Windows, or modern browsers. The ionic framework is famous for\u00a0its strong command-line interface which helps […]<\/p>\n","protected":false},"author":19,"featured_media":1165,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[92,46,5],"tags":[43,74,15,14,32],"yoast_head":"\nHow to create a side menu Using Ionic from blank?<\/title>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a side menu Using Ionic from blank?\" \/>\n<meta property=\"og:description\" content=\"Ionic is completely\u00a0an open source SDK for the hybrid mobile app, It uses Cordova plugins to gain access to the host operating system features such as Camera, GPS, etc. We can build our apps, and customize them for Android, iOS, Windows, or modern browsers. The ionic framework is famous for\u00a0its strong command-line interface which helps […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/subhrarocks\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-14T07:01:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/02\/0_0DfSFC_T8pQhN0D_.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@subhrajitdasgu1\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/02\/0_0DfSFC_T8pQhN0D_.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/\",\"name\":\"How to create a side menu Using Ionic from blank?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/#primaryimage\"},\"datePublished\":\"2019-02-14T07:01:50+00:00\",\"dateModified\":\"2019-02-14T07:01:50+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/543c0027f07aa3058f55a31f279aadf7\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/how-create-side-menu-using-ionic\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/543c0027f07aa3058f55a31f279aadf7\",\"name\":\"Subhrajit Dasgupta\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f835b1b0871c424e21567b7cb5afc6b?s=96&r=g\",\"caption\":\"Subhrajit Dasgupta\"},\"sameAs\":[\"https:\/\/www.facebook.com\/subhrarocks\",\"https:\/\/twitter.com\/subhrajitdasgu1\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1150"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1150"}],"version-history":[{"count":7,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1150\/revisions"}],"predecessor-version":[{"id":1167,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1150\/revisions\/1167"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1165"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}