{"id":1298,"date":"2018-08-17T15:55:11","date_gmt":"2018-08-17T13:55:11","guid":{"rendered":"http:\/\/blog.via-internet.de\/?p=1298"},"modified":"2018-08-17T15:55:11","modified_gmt":"2018-08-17T13:55:11","slug":"ionic-app-from-scratch-adding-content","status":"publish","type":"post","link":"https:\/\/via-internet.de\/blog\/2018\/08\/17\/ionic-app-from-scratch-adding-content\/","title":{"rendered":"Ionic | App from Scratch &#8211; Adding Content"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">In this blog, we will discus the steps to add additional content (pages, components) to your existing app. We will start with the App From Scratch we create <a href=\"\/blog\/2017\/07\/01\/create-an-ionic-2-app-from-scratch\/\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Preparation<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Configure Visual Studio Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, we will configure Visual Studio Code to show only the desired folders for this tutorial.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21-1.png\" alt=\"\" class=\"wp-image-1312\" width=\"318\" height=\"241\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21-1.png 636w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21-1-300x227.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We will hide the folders node_modules, e2e and .env<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21.png\" alt=\"\" class=\"wp-image-1310\" width=\"318\" height=\"241\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21.png 636w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.21-300x227.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.58.png\" alt=\"\" class=\"wp-image-1313\" width=\"328\" height=\"188\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.58.png 656w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.09.58-300x172.png 300w\" sizes=\"auto, (max-width: 328px) 100vw, 328px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To do this, select Code \/ Prefecences \/ Settings<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.15.02.png\" alt=\"\" class=\"wp-image-1314\" width=\"500\" height=\"236\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.15.02.png 1000w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.15.02-300x142.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.15.02-768x362.png 768w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Visual Studio Code will open the settings in a editor window. You will see the default user settings on the left, and the current user settings on the right.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Look for the lines unter &#8220;files.exclude&#8221; and add or edit the desired content.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Setting to <strong>true<\/strong> means exclude (remember the title of the group: <strong>files.exclude<\/strong>)<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.17.22.png\" alt=\"\" class=\"wp-image-1315\" width=\"368\" height=\"260\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.17.22.png 736w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.17.22-300x212.png 300w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Open required windows<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As we add some content, we want to see immediately the results.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So,\u00a0 i opened three windows<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Visual Studio Code<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Browser Windows<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Console, where we start the ionic server<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2884\" height=\"2814\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28.png\" alt=\"\" class=\"wp-image-1330\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28.png 2884w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28-300x293.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28-1024x999.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28-768x749.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28-1536x1499.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.39.28-2048x1998.png 2048w\" sizes=\"auto, (max-width: 2884px) 100vw, 2884px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Change directory structure<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now we can start: Lets add some pages we will use to contain Ionic Components (Buttons, Text, Switches, Lists, Grids, &#8230;)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Out app have 3 pages. You will find them in them explorer window<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.37.48.png\" alt=\"\" class=\"wp-image-1329\" width=\"331\" height=\"271\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.37.48.png 662w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.37.48-300x246.png 300w\" sizes=\"auto, (max-width: 331px) 100vw, 331px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">First, i want to change the directory structure.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For each component type, we will add, i want to a a separate folder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, first: create a folder <strong>pages<\/strong> for our pages<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.44.12.png\" alt=\"\" class=\"wp-image-1332\" width=\"310\" height=\"120\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.44.12.png 620w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.44.12-300x116.png 300w\" sizes=\"auto, (max-width: 310px) 100vw, 310px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.45.21.png\" alt=\"\" class=\"wp-image-1333\" width=\"285\" height=\"158\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.45.21.png 570w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.45.21-300x166.png 300w\" sizes=\"auto, (max-width: 285px) 100vw, 285px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, move the pages folders home, list and about into the newly create folder<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.46.30.png\" alt=\"\" class=\"wp-image-1334\" width=\"161\" height=\"166\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.46.30.png 322w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-16.46.30-291x300.png 291w\" sizes=\"auto, (max-width: 161px) 100vw, 161px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">After that, go into the console, stop the running ionic serve command and restart it to force a new compilation of our app<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">$ ionic serve\n> ng run app:serve --host=0.0.0.0 --port=8100<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In the console window, we will see an error<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">[ng] ERROR in Could not resolve module .\/home\/home.module relative to ...\/app_from_scratch\/src\/app\/app-routing.module.ts<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This is, because we changes the directory path of the pages. We had to adjust the new path in out app: in app-routing.module.ts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">const routes: Routes = [\n  { path: '', redirectTo: 'home', pathMatch: 'full' },\n  { path: 'home', loadChildren: '.\/pages\/home\/home.module#HomePageModule' },\n  { path: 'list', loadChildren: '.\/pages\/list\/list.module#ListPageModule' },\n  { path: 'about', loadChildren: '.\/pages\/about\/about.module#AboutPageModule' }\n];<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add page: ActionSheet<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ionic offers a huge amount of amazing components. So, we will demonstrate the use of this components step by step.&nbsp;We will take the inspiration from <a href=\"https:\/\/beta.ionicframework.com\/docs\/components\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Starting with <em>Action Sheets.<\/em> <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Documentation is <a href=\"https:\/\/beta.ionicframework.com\/docs\/api\/action-sheet\/\">here<\/a><\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>Source is <a href=\"https:\/\/github.com\/ionic4-toolbox\/Course_Ionic4_Basics\/tree\/master\/course\/02_02_einfuehrung_ionic\/02_02_06_anpassen_und_erweitern\/app_from_scratch\/src\/app\/pages\/action-sheet\">here<\/a><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">ionic generate page ActionSheet\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">> ng generate page ActionSheet\nCREATE src\/app\/action-sheet\/action-sheet.module.ts (569 bytes)\nCREATE src\/app\/action-sheet\/action-sheet.page.scss (0 bytes)\nCREATE src\/app\/action-sheet\/action-sheet.page.html (138 bytes)\nCREATE src\/app\/action-sheet\/action-sheet.page.spec.ts (727 bytes)\nCREATE src\/app\/action-sheet\/action-sheet.page.ts (279 bytes)\nUPDATE src\/app\/app-routing.module.ts (736 bytes)\n[OK] Generated page!<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">To add the new page to the sidemenu, change the AppPages array in app.component.ts<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">public appPages = [\n  { title: 'Home', url: '\/home', icon: 'home' },\n  { title: 'List', url: '\/list', icon: 'list' },\n  { title: 'About', url: '\/about', icon: '' },\n  { title: 'ActionSheet', url: '\/ActionSheet', icon: 'list' }\n];<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Notice the different spelling of the url (different case of letters). Whatever spelling you choose, it has to fit to the path value in the app-routing.module.ts<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"2624\" height=\"376\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21.png\" alt=\"\" class=\"wp-image-1342\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21.png 2624w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21-300x43.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21-1024x147.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21-768x110.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21-1536x220.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.20.21-2048x293.png 2048w\" sizes=\"auto, (max-width: 2624px) 100vw, 2624px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, move the page to the pages folder and change the path in app-routing.modules.ts<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06.png\" alt=\"\" class=\"wp-image-1344\" width=\"1174\" height=\"153\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06.png 2348w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06-300x39.png 300w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06-1024x133.png 1024w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06-768x100.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06-1536x200.png 1536w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.22.06-2048x267.png 2048w\" sizes=\"auto, (max-width: 1174px) 100vw, 1174px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Add the sidemenu button to the actionSheet Page (in action-sheet.page.html)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">&lt;ion-header>\n  &lt;ion-toolbar>\n    &lt;ion-buttons slot=\"start\">\n      &lt;ion-menu-button>&lt;\/ion-menu-button>\n    &lt;\/ion-buttons>\n    &lt;ion-title>ActionSheet&lt;\/ion-title>\n  &lt;\/ion-toolbar>\n&lt;\/ion-header><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ok, well done<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48.png\" alt=\"\" class=\"wp-image-1347\" width=\"616\" height=\"924\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48.png 1232w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48-200x300.png 200w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48-683x1024.png 683w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48-768x1152.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-17.24.48-1024x1536.png 1024w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, add a button and the code for displaying the action sheet. The source is <a href=\"https:\/\/github.com\/ionic-team\/ionic-preview-app\/tree\/master\/src\/pages\/action-sheets\/basic\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Change your html page: action-sheet.page.html<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"markup\" class=\"language-markup\">&lt;ion-header>\n  &lt;ion-toolbar>\n    &lt;ion-buttons slot=\"start\">\n      &lt;ion-menu-button>&lt;\/ion-menu-button>\n    &lt;\/ion-buttons>\n    &lt;ion-title>ActionSheet&lt;\/ion-title>\n  &lt;\/ion-toolbar>\n&lt;\/ion-header>\n\n&lt;ion-content padding fullscreen>\n  &lt;ion-button expand=\"block\" id=\"basic\" (click)=\"presentBasic()\">Basic&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"noBackdropDismiss\" (click)=\"presentNoBackdropDismiss()\">No Backdrop Dismiss&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"alertFromActionSheet\" (click)=\"presentAlert()\">Alert from Action Sheet&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"scrollableOptions\" (click)=\"presentScroll()\">Scrollable Options&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"scrollWithoutCancel\" (click)=\"presentScrollNoCancel()\">Scroll Without Cancel&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"cancelOnly\" (click)=\"presentCancelOnly()\">Cancel Only&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"icons\" (click)=\"presentIcons()\">Icons&lt;\/ion-button>\n  &lt;ion-button expand=\"block\" id=\"cssClass\" (click)=\"presentWithCssClass()\">Custom CSS Class&lt;\/ion-button>\n&lt;\/ion-content><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Change your Style: action-sheet.page-scss<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css\">app-action-sheet {\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Change the Code:&nbsp;action-sheet.page.ts. Source is <a href=\"https:\/\/github.com\/ionic4-toolbox\/Course_Ionic4_Basics\/blob\/master\/course\/02_02_einfuehrung_ionic\/02_02_06_anpassen_und_erweitern\/app_from_scratch\/src\/app\/pages\/action-sheet\/action-sheet.module.ts\">here<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript\">import { Component, OnInit } from \"@angular\/core\";\nimport { Platform, ActionSheetController } from \"@ionic\/angular\";\n\n@Component({\n  selector: \"app-action-sheet\",\n  templateUrl: \".\/action-sheet.page.html\",\n  styleUrls: [\".\/action-sheet.page.scss\"]\n})\nexport class ActionSheetPage implements OnInit {\n  constructor(\n    public platform: Platform,\n    public actionSheetController: ActionSheetController\n  ) {}\n\n  ngOnInit() {}\n\n\n  public changeColor(ev) {\n\n  }\n\n  async presentActionSheet() {\n    const actionSheet = await this.actionSheetController.create({\n      header: \"Albums\",\n      buttons: [{\n        text: 'Delete',\n        role: 'destructive',\n        icon: 'trash',\n        handler: () => {\n          console.log('Delete clicked');\n        }\n      }, {\n        text: 'Share',\n        icon: 'share',\n        handler: () => {\n          console.log('Share clicked');\n        }\n      }, {\n        text: 'Play (open modal)',\n        icon: 'arrow-dropright-circle',\n        handler: () => {\n          console.log('Play clicked');\n        }\n      }, {\n        text: 'Favorite',\n        icon: 'heart',\n        handler: () => {\n          console.log('Favorite clicked');\n        }\n      }, {\n        text: 'Cancel',\n        icon: 'close',\n        role: 'cancel',\n        handler: () => {\n          console.log('Cancel clicked');\n        }\n      }]\n    });\n    await actionSheet.present();\n  }\n\n  async presentBasic() {\n    console.log('ActionSheetPage:presentBasic');\n\n    const actionSheet = await this.actionSheetController.create({\n      header: \"Albums\",\n      buttons: [{\n        text: 'Delete',\n        role: 'destructive',\n        icon: 'trash',\n        handler: () => {\n          console.log('Delete clicked');\n        }\n      }, {\n        text: 'Share',\n        icon: 'share',\n        handler: () => {\n          console.log('Share clicked');\n        }\n      }, {\n        text: 'Play (open modal)',\n        icon: 'arrow-dropright-circle',\n        handler: () => {\n          console.log('Play clicked');\n        }\n      }, {\n        text: 'Favorite',\n        icon: 'heart',\n        handler: () => {\n          console.log('Favorite clicked');\n        }\n      }, {\n        text: 'Cancel',\n        icon: 'close',\n        role: 'cancel',\n        handler: () => {\n          console.log('Cancel clicked');\n        }\n      }]\n    });\n    await actionSheet.present();\n  }\n  \n  async presentIcons() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      header: \"Albums\",\n      buttons: [{\n        text: 'Delete',\n        role: 'destructive',\n        icon: 'trash',\n        handler: () => {\n          console.log('Delete clicked');\n        }\n      }, {\n        text: 'Share',\n        icon: 'share',\n        handler: () => {\n          console.log('Share clicked');\n        }\n      }, {\n        text: 'Play (open modal)',\n        icon: 'arrow-dropright-circle',\n        handler: () => {\n          console.log('Play clicked');\n        }\n      }, {\n        text: 'Favorite',\n        icon: 'heart',\n        role: 'selected',\n        handler: () => {\n          console.log('Favorite clicked');\n        }\n      }, {\n        text: 'Cancel',\n        role: 'cancel',\n        icon: 'close',\n        handler: () => {\n          console.log('Cancel clicked');\n        }\n      }]\n    })\n    await actionSheetElement.present();\n  }\n  \n  async presentNoBackdropDismiss() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      backdropDismiss: false,\n      buttons: [{\n        text: 'Archive',\n        handler: () => {\n          console.log('Archive clicked');\n        }\n      }, {\n        text: 'Destructive',\n        role: 'destructive',\n        handler: () => {\n          console.log('Destructive clicked');\n        }\n      }, {\n        text: 'Cancel',\n        role: 'cancel',\n        handler: () => {\n          console.log('Cancel clicked');\n        }\n      }]\n    });\n    await actionSheetElement.present();\n  }\n  \n  async presentAlert() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      buttons: [{\n        text: 'Open Alert',\n        handler: () => {\n          console.log('Open Alert clicked');\n        }\n      }, {\n        text: 'Cancel',\n        role: 'cancel',\n        handler: () => {\n          console.log('Cancel clicked');\n        }\n      }]\n    });\n    await actionSheetElement.present();\n  }\n  \n  async presentScroll() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      buttons: [\n        {\n          text: 'Add Reaction',\n          handler: () => {\n            console.log('Add Reaction clicked');\n          }\n        }, {\n          text: 'Copy Text',\n          handler: () => {\n            console.log('Copy Text clicked');\n          }\n        }, {\n          text: 'Share Text',\n          handler: () => {\n            console.log('Share Text clicked');\n          }\n        }, {\n          text: 'Copy Link to Message',\n          handler: () => {\n            console.log('Copy Link to Message clicked');\n          }\n        }, {\n          text: 'Remind Me',\n          handler: () => {\n            console.log('Remind Me clicked');\n          }\n        }, {\n          text: 'Pin File',\n          handler: () => {\n            console.log('Pin File clicked');\n          }\n        }, {\n          text: 'Star File',\n          handler: () => {\n            console.log('Star File clicked');\n          }\n        }, {\n          text: 'Mark Unread',\n          handler: () => {\n            console.log('Mark Unread clicked');\n          }\n        }, {\n          text: 'Edit Title',\n          handler: () => {\n            console.log('Edit Title clicked');\n          }\n        }, {\n          text: 'Save Image',\n          handler: () => {\n            console.log('Save Image clicked');\n          }\n        }, {\n          text: 'Copy Image',\n          handler: () => {\n            console.log('Copy Image clicked');\n          }\n        }, {\n          text: 'Delete File',\n          role: 'destructive',\n          handler: () => {\n            console.log('Delete File clicked');\n          }\n        }, {\n          text: 'Cancel',\n          role: 'cancel', \/\/ will always sort to be on the bottom\n          handler: () => {\n            console.log('Cancel clicked');\n          }\n        }\n      ]\n    });\n    await actionSheetElement.present();\n  }\n  \n  async presentScrollNoCancel() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      buttons: [\n        {\n          text: 'Add Reaction',\n          handler: () => {\n            console.log('Add Reaction clicked');\n          }\n        }, {\n          text: 'Copy Text',\n          handler: () => {\n            console.log('Copy Text clicked');\n          }\n        }, {\n          text: 'Share Text',\n          handler: () => {\n            console.log('Share Text clicked');\n          }\n        }, {\n          text: 'Copy Link to Message',\n          handler: () => {\n            console.log('Copy Link to Message clicked');\n          }\n        }, {\n          text: 'Remind Me',\n          handler: () => {\n            console.log('Remind Me clicked');\n          }\n        }, {\n          text: 'Pin File',\n          handler: () => {\n            console.log('Pin File clicked');\n          }\n        }, {\n          text: 'Star File',\n          handler: () => {\n            console.log('Star File clicked');\n          }\n        }, {\n          text: 'Mark Unread',\n          handler: () => {\n            console.log('Mark Unread clicked');\n          }\n        }, {\n          text: 'Edit Title',\n          handler: () => {\n            console.log('Edit Title clicked');\n          }\n        }, {\n          text: 'Save Image',\n          handler: () => {\n            console.log('Save Image clicked');\n          }\n        }, {\n          text: 'Copy Image',\n          handler: () => {\n            console.log('Copy Image clicked');\n          }\n        }, {\n          text: 'Delete File',\n          role: 'destructive',\n          handler: () => {\n            console.log('Delete File clicked');\n          }\n        }\n      ]\n    });\n    await actionSheetElement.present();\n  }\n  \n  async presentCancelOnly() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      buttons: [\n        {\n          text: 'Cancel',\n          role: 'cancel', \/\/ will always sort to be on the bottom\n          handler: () => {\n            console.log('Cancel clicked');\n          }\n        }\n      ]\n    });\n    await actionSheetElement.present();\n  }\n  \n  async presentWithCssClass() {\n    const actionSheetController = document.querySelector('ion-action-sheet-controller');\n    await actionSheetController.componentOnReady();\n    const actionSheetElement = await actionSheetController.create({\n      header: \"Custom Css Class\",\n      cssClass: \"my-class my-custom-class\",\n      buttons: [\n        {\n          text: 'Test',\n          role: 'test',\n          cssClass: 'my-cancel-button my-custom-button customClass',\n          handler: () => {\n            console.log('Cancel clicked');\n          }\n        }\n      ]\n    });\n    await actionSheetElement.present();\n  }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Done. Now look at the result<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-2 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1232\" height=\"1772\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57.png\" alt=\"\" data-id=\"1354\" class=\"wp-image-1354\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57.png 1232w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57-209x300.png 209w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57-712x1024.png 712w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57-768x1105.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.16.57-1068x1536.png 1068w\" sizes=\"auto, (max-width: 1232px) 100vw, 1232px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1232\" height=\"1772\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25.png\" alt=\"\" data-id=\"1355\" data-link=\"http:\/\/blog.via-internet.de\/blog\/2018\/08\/17\/ionic4-app-from-scratch-adding-content\/bildschirmfoto-2018-08-17-um-18-17-25\/#main\" class=\"wp-image-1355\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25.png 1232w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25-209x300.png 209w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25-712x1024.png 712w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25-768x1105.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.17.25-1068x1536.png 1068w\" sizes=\"auto, (max-width: 1232px) 100vw, 1232px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add page: <a href=\"https:\/\/github.com\/ionic4-toolbox\/Course_Ionic4_Basics\/tree\/master\/course\/02_02_einfuehrung_ionic\/02_02_06_anpassen_und_erweitern\/app_from_scratch\/src\/app\/pages\/buttons\">Buttons<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"1846\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44.png\" alt=\"\" class=\"wp-image-1362\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44.png 1268w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44-206x300.png 206w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44-703x1024.png 703w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44-768x1118.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.22.44-1055x1536.png 1055w\" sizes=\"auto, (max-width: 1268px) 100vw, 1268px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Add page: <a href=\"https:\/\/github.com\/ionic4-toolbox\/Course_Ionic4_Basics\/tree\/master\/course\/02_02_einfuehrung_ionic\/02_02_06_anpassen_und_erweitern\/app_from_scratch\/src\/app\/pages\/toolbar-buttons\">Toolbar Buttons<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"1846\" src=\"http:\/\/blog.via-internet.de\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50.png\" alt=\"\" class=\"wp-image-1363\" srcset=\"https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50.png 1268w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50-206x300.png 206w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50-703x1024.png 703w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50-768x1118.png 768w, https:\/\/via-internet.de\/blog\/wp-content\/uploads\/2018\/08\/Bildschirmfoto-2018-08-17-um-18.23.50-1055x1536.png 1055w\" sizes=\"auto, (max-width: 1268px) 100vw, 1268px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will discus the steps to add additional content (pages, components) to your existing app. We will start with the App From Scratch we create here. Preparation Configure Visual Studio Code First, we will configure Visual Studio Code to show only the desired folders for this tutorial. We will hide the folders node_modules, e2e and .env To do this, select Code \/ Prefecences \/ Settings Visual Studio Code will open the settings in a editor window. You will see the default user settings on the left, and the current user settings on the right. Look for the lines [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[98,34,35],"tags":[],"class_list":["post-1298","post","type-post","status-publish","format-standard","hentry","category-ionic","category-ionic-3","category-ionic-4"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1298","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=1298"}],"version-history":[{"count":0,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/posts\/1298\/revisions"}],"wp:attachment":[{"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/media?parent=1298"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/categories?post=1298"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/via-internet.de\/blog\/wp-json\/wp\/v2\/tags?post=1298"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}