Getting started with Ionic 2 by building a Markdown App

Hello readers! Today we’re going to dig a little bit into (or in this case). We'll learn about by building a simple Markdown App which can give user preview of Markdown text on-the-go on their mobile device. We’ll build this app keeping Android platform in mind. Ionic Ionic 2 Ionic So, first of all you ask. “What is Ionic?” From its official , With , you can build mobile apps using the technologies you already know. That’s right! It’s all HTML, CSS and . website “Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.” Ionic JavaScript Yes yes, I hear you asking The answer is, frameworks like Phonegap are build systems using (they’re fairly synonymous), whereas Ionic is an based app development platform with Google’s UI that uses Cordova to package itself for mobile platforms. Apart from using AngularJS in it’s core, Ionic also facilitates.. “why do we need Ionic when we already have frameworks like Phonegap ?” Cordova AngularJS Material Design Features to build the progressive web apps Live Reload which compile and redeploy your app at every step of development is for chumps AoT Compiling which makes an ionic app loads lightning fast In this tutorial, we are going to make our Markdown App using Ionic 2 which is using in its core. To build an Ionic app locally, all you need is recent version of installed on your computer, a latest browser(preferably Chrome) and a text editor of your choice. Sounds exciting? Let’s get started with it. Angular 2 Node.js Installing Ionic Ionic 2 apps are created and developed primarily through the Ionic command line utility (the “CLI”), and use Cordova to build and deploy as a native app. This means we need to install a few utilities to get developing. Ionic CLI and Cordova To create Ionic 2 apps, you’ll need to install the latest version of the Ionic CLI and Cordova. Install the Ionic CLI and Cordova for native app development: $ npm install -g ionic cordova This will take some time to be installed and ready to use. You may need to add “sudo” in front of these commands to install the utilities globally or in case of Windows, you need to open Command Prompt in Administrator mode. You may get error while installing _Ionic_ in flaky networks but hold onto it and you'll surely end up installing it. Once both and installed, we can generate a basic Ionic app using following command: ionic cordova $ ionic start ionic-markdownify --v2 Notice here that we have added — v2 because we want to build our app using Ionic 2. In case, you want to build app using Ionic 1, omit — v2. This will generate a folder called with following folder structure: ionic-markdownify dir contains all the pages that our app is going to use. In our app, we’ll only deal with dir. pages home To run our app, cd into the directory that was created and then run the command to test your app right in the browser! ionic serve $ cd ionic-markdownify$ ionic serve This will start our app and we can see our app in action over It’s a basic Tab based application and would look like below: http://localhost:8100. Next, In order to make our Markdown app, we will first modify our file . We will replace the content within to following: src/pages/home/home.html Notice, we have used _Ionic_ 's inbuilt textarea component _ _ which gives the native touch to the textarea in specific OS environment(in our case it's Android). We have also bind the _ion-textarea_ using _[(ngModel)]="plainText"_ which will help us getting it's value in _class HomePage_ in _src/pages/home/home.ts_ Next, we’ll add a toggle button which we’ll use to toggle between Textarea and Markdown Preview. Let’s add it. After this, we will add another after the existing one which we'll use to hold the HTML preview of the Markdown. We'll add in this component in order to show only in case if state of the toggle changes. We have done same with in which lies. After wiring down all these will look like this: [hidden]="!toggleVal" src/pages/home/home.html To make our full height we will add following piece of CSS in : src/pages/home/home.scss After this, we will add to the to track the value of the same and will also add to track the changes of the toggle. [(ngModel)]="toggleVal" (ionChange)="convert()" At this point our app’s tab would look like below: Home We will then add function into as follows: convert() home.ts Notice this function will check the toggle’s current state and based on that it will convert the Markdown to releveant HTML. Also notice that we have maintained the state of the toggle based on the textarea’s value. To convert Markdown to HTML, we’ll use library. To install it fire the below command in CLI: marked This will install into our project. To use it in our app, let's add now the following line on top of the marked src/pages/home/home.ts import marked from 'marked'; Apart from this, to use the reference of the we'll add Angular's from [ViewChild](https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html) @angular/core import { Component, ViewChild, Input } from '@angular/core'; And will add it as follows: class HomePage @ViewChild(Content) content: Content; After adding all these our would look like below at this point: src/pages/home/home.ts This basically sums up our whole app. Now, head towards the in your browser and you’ll see our pretty little app in action! http://localhost:8100 You can also check the whole codebase of this app over . here The whole idea of this tutorial is to get you up and running with Ionic 2 by building a real world app and to understand some of the concepts of Ionic 2. You can improve this particular app. Some improvements as.. Implementing swipe gesture to get rid of toggle so that user just need to swipe left in order to get preview. Implementing Markdown’s editing tools such as bold, italic, underline, code and so forth. Implementing a text editor in place of textarea. You can also package your newly created app for any platform(Android, iOS, Windows Phone OS) of your like using and distribute the same. Ionic Package For more information upon Ionic 2 you can follow this and tweak your way through a whole lot of Ionic 2 components. documentation Thanks for reading. Happy hacking!