How to create an Ionic 4 app - For beginners
Tags: ionic, hybrid, app, development
Published: 2019-09-16 12:58:54

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="0b31" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5622" class="graf graf--p graf-after--figure is-selected">Hybrid apps have been the sensation in recent years and for a good reason. With their ease of development, powerful performance and versatile usage possibility, Hybrid apps beat Native apps at many frontiers. Ionic has been at the forefront of Hybrid app development for the last few years, and it is just getting better. With the release of the latest<strong class="markup--strong markup--p-strong"> Ionic 4 framework</strong>, the overall stability of apps has gone up again.</p><p name="8c67" class="graf graf--p graf-after--p">We have been writing about complex topics in <strong class="markup--strong markup--p-strong">Ionic 4</strong> for a while. In this blog post, we’ll read about the basic aspects of an <strong class="markup--strong markup--p-strong">Ionic 4</strong> app and how to create one.</p><h3 name="a98e" class="graf graf--h3 graf-after--p">What is Ionic and&nbsp;Cordova?</h3><p name="eaae" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.</p><p name="9ab3" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Cordova</strong> enables software programmers to build applications for mobile devices using CSS3, HTML5, and JavaScript instead of relying on platform-specific APIs like those in Android, iOS, or Windows Phone. It extends the features of HTML and JavaScript to work with the device.</p><blockquote name="2a57" class="graf graf--blockquote graf-after--p">Ionic is actually another wrapper on top of Cordova. Cordova has the basic HTML/CSS/JS → Native capabilities, while Ionic powers neater and powerful layouts and overall app management on top of Cordova</blockquote><p name="de54" class="graf graf--p graf-after--blockquote">So, in other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.</p><p name="0880" class="graf graf--p graf-after--p">Ionic started with AngularJS as the underlying framework, but now it has extended to <a href="https://en.wikipedia.org/wiki/Angular_%28application_platform%29"  class="markup--anchor markup--p-anchor" title="Angular (application platform)" rel="noopener"    target="_blank">Angular</a> and even <a href="https://reactjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">React</a>&nbsp;!</p><h3 name="c64f" class="graf graf--h3 graf-after--p">Setting up an Ionic 4&nbsp;app</h3><p name="06db" class="graf graf--p graf-after--h3">So what tools do you need for Ionic 4 app development? Well, here’s the list</p><ul class="postList"><li name="10f6" class="graf graf--li graf-after--p">A computer (Duh&nbsp;! )</li><li name="8c02" class="graf graf--li graf-after--li">NodeJS framework installed&#8202;—&#8202;NodeJS is a server framework in JS</li><li name="82c0" class="graf graf--li graf-after--li">NPM&#8202;—&#8202;Node package manager</li><li name="2aa2" class="graf graf--li graf-after--li">Cordova&#8202;—&#8202;required for building on the device, not for the browser</li><li name="70aa" class="graf graf--li graf-after--li">Ionic</li></ul><p name="03b0" class="graf graf--p graf-after--li">You also will need latest browser for development environment. To create production builds in Android and iOS, it would require <a href="https://developer.android.com/studio"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Android Studio</a> and <a href="https://developer.apple.com/xcode/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">XCode</a> respectively.</p><p name="f60d" class="graf graf--p graf-after--p">Install node by downloading the compatible package from their <a href="https://nodejs.org/en/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">website</a>. NPM is installed along with node.js. NPM is used for any further installations.</p><p name="0ce0" class="graf graf--p graf-after--p">To verify the installations, run these commands in your terminal</p><pre name="da56" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ node --version<br>$ npm --version</code></pre><p name="806c" class="graf graf--p graf-after--pre">Install Ionic using</p><pre name="a47d" class="graf graf--pre graf-after--p">$ <code class="markup--code markup--pre-code">npm install -g ionic</code></pre><p name="b3bf" class="graf graf--p graf-after--pre">And you are good to go. Check your environment information using</p><pre name="1875" class="graf graf--pre graf-after--p">$ ionic info</pre><p name="ce0b" class="graf graf--p graf-after--pre">This will display your runtime environment, something like following (Android SDK tools and XCode will require separate installations)</p><figure tabindex="0" contenteditable="false" name="1600" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 308px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 44%;"></div><img class="graf-image" data-image-id="1*BKEzk6iSr8gurHJOp23-vA.png" data-width="827" data-height="364" src="https://cdn-images-1.medium.com/max/720/1*BKEzk6iSr8gurHJOp23-vA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Development environment information</figcaption></figure><p name="972e" class="graf graf--p graf-after--figure">You can install latest <a href="https://developer.android.com/studio"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Android Studio</a> from their website. <a href="https://developer.apple.com/xcode/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">XCode</a> can be installed only on Apple systems.</p><h3 name="2088" class="graf graf--h3 graf-after--p">Creating an Ionic 4&nbsp;app</h3><p name="e9a6" class="graf graf--p graf-after--h3">Once your development environment is set, creating an Ionic 4 app is as easy as running one command</p><pre name="f771" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ ionic start</code></pre><p name="7e90" class="graf graf--p graf-after--pre">Really, that’s all it takes to create an Ionic app. Once you run this command, The Ionic CLI will display prompts asking for the new project’s name and which template to use (Sidemenu, Tabs or blank). Hit enter and it will install the basic app template right on your system</p><p name="422b" class="graf graf--p graf-after--p">To run the app in browser, run this in your project root directory</p><pre name="17ba" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="ab5d" class="graf graf--p graf-after--pre">This will run the app in a development environment in your default browser. the url will be <code class="markup--code markup--p-code">localhost:8100</code></p><blockquote name="8424" class="graf graf--blockquote graf-after--p">Development environment in Ionic does (can) not use Cordova. Cordova runs on devices only. So you cannot use the Ionic Native plugins on browser environment. Ionic development environment only uses the underlying Angular (or React) to run the app on browser</blockquote><p name="dc93" class="graf graf--p graf-after--blockquote">Let’s say you ran <code class="markup--code markup--p-code">ionic start myApp sidemenu</code>, you will get a Sidemenu template loaded in your chrome. To see it in a mobile format, right click in browser, and select <code class="markup--code markup--p-code">Inspect Element</code>&nbsp;. Switch the device mode by using device icon.</p><figure tabindex="0" contenteditable="false" name="187e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 386px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.2%;"></div><img class="graf-image" data-image-id="1*K3Z0uHBGguReWQCvYtN6yg.png" data-width="1388" data-height="766" src="https://cdn-images-1.medium.com/max/720/1*K3Z0uHBGguReWQCvYtN6yg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">First run on browser, in device&nbsp;mode</figcaption></figure><p name="ee9c" class="graf graf--p graf-after--figure">So now that you have your Ionic app running in the browser, it’s time to understand the code structure, and then make some changes.</p><h3 name="3cf3" class="graf graf--h3 graf-after--p">Code Structure</h3><p name="af1d" class="graf graf--p graf-after--h3">Ionic creates a default structure every time you create and app using <code class="markup--code markup--p-code">ionic start</code>&nbsp;. Let us understand the structure</p><figure tabindex="0" contenteditable="false" name="bde6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 617px; max-height: 413px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.9%;"></div><img class="graf-image" data-image-id="1*X8EjbG_d7sLTEEXwGA9Azw.png" data-width="617" data-height="413" src="https://cdn-images-1.medium.com/max/720/1*X8EjbG_d7sLTEEXwGA9Azw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic structure of Ionic&nbsp;app</figcaption></figure><p name="a934" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">src</code>&#8202;—&#8202;This folder contains majority of the app’s code. All pages, services, components and styling sits inside this.</p><p name="b5f6" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">assets</code>&#8202;—&#8202;This folder contains all static files of the project&#8202;—&#8202;Images, fonts etc.</p><p name="4b6a" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">environments</code>&#8202;—&#8202;This folder can be used to define environment settings. by default it has two files, one for <code class="markup--code markup--p-code">dev</code> and one for <code class="markup--code markup--p-code">prod</code> environment. These settings can be same or different depending on your <code class="markup--code markup--p-code">dev</code> vs <code class="markup--code markup--p-code">prod</code> configuration. E.g. You can define one server configuration for development, while have another production server configuration for <code class="markup--code markup--p-code">prod</code> environment.</p><p name="bf33" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">theme</code>&#8202;—&#8202;Theme folder can be used to define styling variables. Ionic 4 uses CSS variables to define a variety of styling parameters like primary colors, font-sizes, font-family and a lot more. You can use this folder to create global styling variables.</p><figure tabindex="0" contenteditable="false" name="1359" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 497px; max-height: 473px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 95.19999999999999%;"></div><img class="graf-image" data-image-id="1*7jARNUYEMfyRyhk2_jdA-w.png" data-width="497" data-height="473" src="https://cdn-images-1.medium.com/max/720/1*7jARNUYEMfyRyhk2_jdA-w.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Example of Ionic styling variables</figcaption></figure><p name="2ee3" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">global.scss</code>&#8202;—&#8202;defines global styling that should be applied for the whole app.</p><p name="903b" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">index.html</code>&#8202;—&#8202;is the home HTML file that launches the app. After all, Ionic apps are built up on Webviews.</p><p name="d70a" class="graf graf--p graf-after--p">Inside the <code class="markup--code markup--p-code">src</code> folder, you have the default <code class="markup--code markup--p-code">app</code> files which contain global settings of the app</p><figure tabindex="0" contenteditable="false" name="d7d1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 326px; max-height: 312px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 95.7%;"></div><img class="graf-image" data-image-id="1*nkAJaFQPI-TYiyUdDFqEUA.png" data-width="326" data-height="312" src="https://cdn-images-1.medium.com/max/720/1*nkAJaFQPI-TYiyUdDFqEUA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Folder structure inside src&nbsp;folder</figcaption></figure><p name="e341" class="graf graf--p graf-after--figure"><code class="markup--code markup--p-code">app.routing.module.ts</code>&#8202;—&#8202;Contains information related to page navigation</p><p name="a4f7" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">app.component.html</code>&#8202;—&#8202;defines the parent HTML of the app. This contains sidemenu in our example</p><p name="8c77" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">app.component.ts</code>&#8202;—&#8202;is the Javascript file for <code class="markup--code markup--p-code">app.component.html</code>&nbsp;. Generally, any code that needs to be run immediately after app load is written in this file.</p><p name="b872" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">app.module.ts</code>&#8202;—&#8202;is the “module” file for the parent module, or you can say for the whole app. It defines which modules are included in the app. It is a very important file when it comes to building a production build.</p><figure tabindex="0" contenteditable="false" name="fdff" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 451px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 64.5%;"></div><img class="graf-image" data-image-id="1*TSR3lKKmwniQumjPLJP5bQ.png" data-width="777" data-height="501" src="https://cdn-images-1.medium.com/max/720/1*TSR3lKKmwniQumjPLJP5bQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">app.module.ts file initial structure</figcaption></figure><p name="6412" class="graf graf--p graf-after--figure">You can see the basic modules imported in the image above. Let us try to understand things here a bit more.</p><h3 name="a1f2" class="graf graf--h3 graf-after--p">Advanced&#8202;—&#8202;Understanding app.module.ts</h3><h4 name="271e" class="graf graf--h4 graf-after--h3">declarations</h4><p name="6df3" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">declarations</strong> section we need to include all <strong class="markup--strong markup--p-strong">components</strong>, <strong class="markup--strong markup--p-strong">directives</strong> and <strong class="markup--strong markup--p-strong">pipes</strong> we create as part of our application. If you don’t include them here, you’ll get an error when you try to use them in your application because Angular won’t be able to recognize them in your code.</p><h4 name="9503" class="graf graf--h4 graf-after--p">imports</h4><p name="a6d3" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">imports</strong> section we see that the <strong class="markup--strong markup--p-strong">IonicModule</strong> is imported and that it sets the root app component.</p><p name="2621" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">IonicModule</strong> contains all the components, directives and services from the Ionic framework and by importing the module here we make these available to our app.</p><p name="9dad" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">AppRoutingModule</strong> is also imported here. You can import other Angular Modules here that you might want to use in your app.</p><h4 name="2dc6" class="graf graf--h4 graf-after--p">bootstrap</h4><p name="1dfd" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">bootstrap</strong> section, we configure which components are created at the launch of the application.</p><p name="1d6c" class="graf graf--p graf-after--p">Usually, you’ll only find one component in this array. In this case, that is the <strong class="markup--strong markup--p-strong">AppComponent</strong>, which is Ionic’s root component, which is responsible for loading our <strong class="markup--strong markup--p-strong">MyApp</strong> Component.</p><p name="c3fe" class="graf graf--p graf-after--p">If you have a look at <strong class="markup--strong markup--p-strong">index.html</strong>, you’ll see that <code class="markup--code markup--p-code">&lt;ion-app&gt;</code>, the selector for <strong class="markup--strong markup--p-strong">IonicApp</strong>, is included in the <code class="markup--code markup--p-code">&lt;body&gt;</code>. On start of the application, Angular will create an instance of the root component and insert it in the place of the <code class="markup--code markup--p-code">&lt;ion-app&gt;</code> element.</p><pre name="83db" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;!-- Ionic's root component and where the app will load --&gt;  <br>&lt;ion-app&gt;&lt;/ion-app&gt;</code></pre><h4 name="ea3a" class="graf graf--h4 graf-after--pre">entryComponents</h4><p name="e89b" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">entryComponents</strong> section we define any component that is required to be loaded along with this module. This is the case for all Page components since these are all loaded through the Navigation Controller.</p><p name="60fc" class="graf graf--p graf-after--p">Components that are loaded declaratively (i.e. are referenced in another component’s template) don’t need to be included in the <strong class="markup--strong markup--p-strong">entryComponents</strong> array.</p><p name="4fd8" class="graf graf--p graf-after--p">There can be some duplication where we have to define our Page components in both the <strong class="markup--strong markup--p-strong">declarations</strong> and the <strong class="markup--strong markup--p-strong">entryComponents</strong> sections. The reason for having this separate <strong class="markup--strong markup--p-strong">entryComponents</strong> section is so that Angular can compile a bundle for the app that will only include the components that are actually used within the app.</p><p name="a612" class="graf graf--p graf-after--p">Loading of modules dynamically is useful when you want a smaller first deploy bundle, and <strong class="markup--strong markup--p-strong">Lazy load</strong> the modules/pages which will come in later. You can read more about lazy loading <a href="https://blog.ionicframework.com/ionic-and-lazy-loading-pt-1/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a>.</p><h4 name="2136" class="graf graf--h4 graf-after--p">providers</h4><p name="56e1" class="graf graf--p graf-after--h4">In the <strong class="markup--strong markup--p-strong">providers</strong> section we can register services for dependency injection. When you register a service in the App Module, it can be used in all the components in your app. But you can always define a service locally for a page, if it is not being used globally.</p><h3 name="3630" class="graf graf--h3 graf-after--p">Modifying the&nbsp;app</h3><p name="1a03" class="graf graf--p graf-after--h3">So we have a basic template. We understand the structure and now we want to modify the app as per our liking. Make sure the <code class="markup--code markup--p-code">ionic serve</code> process is running in the terminal.</p><p name="11d4" class="graf graf--p graf-after--p">Let’s modify the Homepage of the app, which resides in <code class="markup--code markup--p-code">src/app/home</code> folder.</p><p name="a4e6" class="graf graf--p graf-after--p">Go to <code class="markup--code markup--p-code">home.page.html</code> and change the code to following</p><pre name="0936" class="graf graf--pre graf-after--p">&lt;ion-header&gt;<br>  &lt;ion-toolbar&gt;<br>    &lt;ion-buttons slot="start"&gt;<br>      &lt;ion-menu-button&gt;&lt;/ion-menu-button&gt;<br>    &lt;/ion-buttons&gt;<br>    &lt;ion-title&gt;<br>      <strong class="markup--strong markup--pre-strong">Hello World</strong><br>    &lt;/ion-title&gt;<br>  &lt;/ion-toolbar&gt;<br>&lt;/ion-header&gt;</pre><pre name="f2e9" class="graf graf--pre graf-after--pre">&lt;ion-content&gt;<br>  &lt;ion-card class="welcome-card"&gt;<br>    &lt;ion-img src="/assets/shapes.svg"&gt;&lt;/ion-img&gt;<br>    &lt;ion-card-header&gt;<br>     &lt;ion-card-subtitle&gt;<strong class="markup--strong markup--pre-strong">I am just getting started</strong>&lt;/ion-card-subtitle&gt;<br>     &lt;ion-card-title&gt;<strong class="markup--strong markup--pre-strong">Welcome to My World</strong>&lt;/ion-card-title&gt;<br>    &lt;/ion-card-header&gt;<br>    &lt;ion-card-content&gt;<br>     &lt;p&gt;<strong class="markup--strong markup--pre-strong">I can modify my app as I like, muhahahahaha !</strong>&lt;/p&gt;<br>    &lt;/ion-card-content&gt;<br>  &lt;/ion-card&gt;<br>&lt;/ion-content&gt;</pre><p name="ca54" class="graf graf--p graf-after--pre">Save your file. As soon as you save the file, you will see the app recompiling in the terminal. You app in the browser will auto-update to show this</p><figure tabindex="0" contenteditable="false" name="aef9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 387px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.300000000000004%;"></div><img class="graf-image" data-image-id="1*e3Ws0Bzf1y7K9SBGuhoMKw.png" data-width="1386" data-height="766" src="https://cdn-images-1.medium.com/max/720/1*e3Ws0Bzf1y7K9SBGuhoMKw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Make your first modification in Ionic 4&nbsp;app</figcaption></figure><p name="d325" class="graf graf--p graf-after--figure">You have successfully modified an Ionic app. Now you can proceed with adding more pages, more logics, images, texts and so on. Make it a feature app&nbsp;!</p><h4 name="406c" class="graf graf--h4 graf-after--p">Adding new&nbsp;page</h4><p name="2a7a" class="graf graf--p graf-after--h4">Adding a new page or component is very systematic in Ionic. You can use the command</p><pre name="22fd" class="graf graf--pre graf-after--p">$ ionic generate</pre><p name="7a82" class="graf graf--p graf-after--pre">and it will ask you the questions to create new code</p><figure tabindex="0" contenteditable="false" name="3371" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 614px; max-height: 206px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 33.6%;"></div><img class="graf-image" data-image-id="1*Tmylyru4Q4Jc2wDPKWsQTw.png" data-width="614" data-height="206" src="https://cdn-images-1.medium.com/max/720/1*Tmylyru4Q4Jc2wDPKWsQTw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Generate new page, component etc in Ionic is very&nbsp;easy</figcaption></figure><p name="f6c8" class="graf graf--p graf-after--figure">Or you can use direct CLI command to do it in one step</p><pre name="d43d" class="graf graf--pre graf-after--p">$ ionic g page "My new page"</pre><p name="5644" class="graf graf--p graf-after--pre">Using this command, Ionic will create the required files for the module. E.g. for a page, it will create HTML, SCSS, <code class="markup--code markup--p-code">module.ts</code> and <code class="markup--code markup--p-code">page.ts</code> files.</p><h3 name="aaad" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="adcf" class="graf graf--p graf-after--h3 graf--trailing">This blog was a basic warmup write-up for Ionic 4 beginners. You can read more about advanced components, UI layouts and plugins in <a href="https://ionicframework.com/docs"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic documentation</a>.</p></div></div></section><section name="e0bb" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="ecb9" class="graf graf--h3 graf--leading">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="95a9" class="graf graf--p graf-after--h3">Also check out our other blog posts related to <a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--p-anchor"    target="_blank">Firebase in Ionic 4</a>, <a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--p-anchor"    target="_blank">Geolocation</a> in Ionic 4, <a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--p-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment gateways in Ionic 4</a></p><p name="ed14" class="graf graf--p graf-after--p">Also check out this interesting post on <a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--p-anchor"    target="_blank">How to create games in Ionic 4 with Phaser</a></p><h3 name="362a" class="graf graf--h3 graf-after--p">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Ionic 4&#8202;—&#8202;Firebase Starter</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3 graf--trailing"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic documentation</a></li></ul></div></div></section></div></article></main>