{"id":560,"date":"2017-07-02T11:53:28","date_gmt":"2017-07-02T09:53:28","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=560"},"modified":"2017-07-02T11:53:28","modified_gmt":"2017-07-02T09:53:28","slug":"ionic-app-from-scratch-two-sidemenus","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2017\/07\/02\/ionic-app-from-scratch-two-sidemenus\/","title":{"rendered":"Ionic | App from Scratch – Two Sidemenus"},"content":{"rendered":"\n

Prepare your starter App<\/h3>\n\n\n\n
ionic start App sidemenu --type angular --no-git<\/pre>\n\n\n\n
Change into the newly create folder and start the Ionic App<\/p>\n\n\n\n
cd App\nionic serve<\/pre>\n\n\n\n
You will see the default Ionic Sidemenu App<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The entries of the sSidemenu are defined in app.components.ts:<\/p>\n\n\n\n
export class AppComponent {\n\tpublic appPages = [\n\t\t{ title: 'Home', url: '\/home', icon: 'home' },\n\t\t{ title: 'List', url: '\/list', icon: 'list' }\n\t];<\/pre>\n\n\n\n
The sidemenu itself and his apperance are defined in app.component.html:<\/p>\n\n\n\n
<ion-app>\n  <ion-split-pane contentId=\"main-content\">\n    <ion-menu contentId=\"main-content\" type=\"overlay\">\n      <ion-header>\n        <ion-toolbar>\n          <ion-title>Menu<\/ion-title>\n        <\/ion-toolbar>\n      <\/ion-header>\n      <ion-content>\n        <ion-list>\n          <ion-menu-toggle auto-hide=\"false\" *ngFor=\"let p of appPages\">\n            <ion-item [routerDirection]=\"'root'\" [routerLink]=\"[p.url]\">\n              <ion-icon slot=\"start\" [name]=\"p.icon\"><\/ion-icon>\n              <ion-label>{{p.title}}<\/ion-label>\n            <\/ion-item>\n          <\/ion-menu-toggle>\n        <\/ion-list>\n      <\/ion-content>\n    <\/ion-menu>\n    <ion-router-outlet id=\"main-content\"><\/ion-router-outlet>\n  <\/ion-split-pane>\n<\/ion-app><\/pre>\n\n\n\n
The Sidemenu entries and the Icon are added in line 13 and 14 to the sidemenu.<\/p>\n\n\n\n
Define two sidemenus in app.html<\/h3>\n\n\n\n
<ion-menu [content]=\"contentLeft\"> ....<\/ion-menu>\n<ion-menu side=\"right\" [content]=\"contentRight\">....<\/ion-menu>\n ....\n\n<ion-nav [root]=\"rootPage\" #contentLeft #contentRight swipeBackEnabled=\"false\"><\/ion-nav><\/pre>\n\n\n\n
Add buttons to page<\/h3>\n\n\n\n
<ion-header>\n   <ion-navbar>\n      <button ion-button start menuToggle>\n         <ion-icon name=\"menu\"><\/ion-icon>\n      <\/button>\n      <ion-title>Demo of two Sidemenus<\/ion-title>\n      <button ion-button end menuToggle=\"right\">\n         <ion-iconname=\"menu\"><\/ion-icon>\n      <\/button>\n   <\/ion-navbar>\n<\/ion-header>\n<ion-content padding>\n<\/ion-content><\/pre>\n\n\n\n
Result<\/h5>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Github Repository<\/h5>\n\n\n\n
<\/p>\n\n\n\n
You can find the code here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Prepare your starter App Change into the newly create folder and start the Ionic App You will see the default Ionic Sidemenu App The entries of the sSidemenu are defined in app.components.ts: The sidemenu itself and his apperance are defined in app.component.html: The Sidemenu entries and the Icon are added in line 13 and 14 to the sidemenu. Define two sidemenus in app.html Add buttons to page Result Github Repository You can find the code here<\/p>\n","protected":false},"author":1,"featured_media":241,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98,34,35],"tags":[],"class_list":["post-560","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic","category-ionic-3","category-ionic-4"],"jetpack_featured_media_url":"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2016\/11\/Bildschirmfoto-2016-11-28-um-06.12.34-e1481363320900.png","jetpack_sharing_enabled":false,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media\/241"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}