Getting started with Ionic 2 by building a Markdown App
Tags: markdown, typescript, javascript, ionic
Published: 2017-06-21 09:50:21

---
title: Getting started with Ionic 2 by building a Markdown App
published: true
description: Learn how to build a simple Markdown app using Ionic 2
tags: markdown, typescript, javascript, ionic
cover_image: https://cdn-images-1.medium.com/max/1600/0*9se5QuXlwyvHE81Y.jpg
---

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.

So, first of all *“What is Ionic?”* you ask.

From its official [website](https://ionicframework.com/), **“Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.”** With Ionic, you can build mobile apps using the technologies you already know. That’s right! It’s all HTML, CSS and JavaScript.

Yes yes, I hear you asking *“why do we need Ionic when we already have frameworks like [Phonegap](http://phonegap.com/)?”* The answer is, frameworks like Phonegap are build systems using [Cordova](https://cordova.apache.org/)(they’re fairly synonymous), whereas Ionic is an [AngularJS](https://angular.io/) based app development platform with Google’s [Material Design](https://material.io/) UI that uses Cordova to package itself for mobile platforms. Apart from using AngularJS in it’s core, Ionic also facilitates..

* 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 [Angular 2](https://angular.io/) in its core. To build an Ionic app locally, all you need is recent version of [Node.js](https://nodejs.org/en/)installed on your computer, a latest browser(preferably Chrome) and a text editor of your choice. Sounds exciting? Let’s get started with it.

#### 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:
```bash
    $ 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 `ionic` and `cordova` installed, we can generate a basic Ionic app using following command:
```bash
    $ 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:

```
.
+-- hooks
+-- node_modules
+-- plugins
+-- resources
|   +-- android
|   +-- ios
|   +-- wp8
+-- src
|   +-- app
|   +-- assets
|   +-- pages
|   	+-- about
|   	+-- contact
|   	+-- home
|   	+-- tabs
|   +-- theme
+-- www
+-- .editorconfig
+-- .gitignore
+-- .io-config.json
+-- config.xml
+-- ionic.config.json
+-- package.json
+-- tsconfig.json
+-- tslint.json
```

`pages` dir contains all the pages that our app is going to use. In our app, we’ll only deal with `home` dir.

To run our app, cd into the directory that was created and then run the `ionic serve` command to test your app right in the browser!
```bash
    $ cd ionic-markdownify 
    $ ionic serve
```
This will start our app and we can see our app in action over [http://localhost:8100.](http://localhost:8100./) It’s a basic Tab based application and would look like below:

![](https://cdn-images-1.medium.com/max/1600/0*BII77Y1WBJVoF46J.png)

Next, In order to make our Markdown app, we will first modify our file `src/pages/home/home.html`. We will replace the content within `<ion-content></ion-content>` to following:

```html
<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-textarea rows="6" [(ngModel)]="plainText" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>
```

> Notice, we have used `Ionic`'s inbuilt textarea component `<ion-textarea>` 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.

```html
<h2>Welcome to Markdownify!</h2>
<ion-item>
  <ion-label>Convert to Markdown</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>
<ion-item>
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
</ion-item>
```

After this, we will add another `<ion-content></ion-content>` after the existing one which we'll use to hold the HTML preview of the Markdown. We'll add `[hidden]="!toggleVal"` in this component in order to show only in case if state of the toggle changes. We have done same with `<ion-item>` in which `<ion-textarea>` lies. After wiring down all these `src/pages/home/home.html` will look like this:

```html
<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Markdownify!</h2>
  <ion-item>
    <ion-label>Convert to Markdown</ion-label>
    <ion-toggle color="secondary"></ion-toggle>
  </ion-item>

  <ion-item [hidden]="toggleVal">
    <ion-textarea rows="6" placeholder="Strat writing your markdown below..."></ion-textarea>
  </ion-item>
  <ion-content [hidden]="!toggleVal">
    <div [innerHtml]="content"></div>
  </ion-content>
</ion-content>
```

To make our `<ion-textarea>` full height we will add following piece of CSS in `src/pages/home/home.scss`:

```css
textarea {
  max-width: 100%;
  width: 100%;
  height: 100vh;
}
```

After this, we will add `[(ngModel)]="toggleVal"` to the `<ion-toggle>` to track the value of the same and will also add `(ionChange)="convert()"` to track the changes of the toggle.

At this point our app’s `Home` tab would look like below:

![](https://cdn-images-1.medium.com/max/1600/0*hA9YImcUX6CpaCxY.png)

We will then add `convert()` function into `home.ts` as follows:

```ts
convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText

        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
}
```

> Notice this function will check the toggle’s current state and based on that it
will convert the Markdown to relevant 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 `marked` library. To install it fire the below command in CLI:

```bash
    $ npm install marked --save
```

This will install `marked` into our project. To use it in our app, let's add now the following line on top of the `src/pages/home/home.ts` 

```js
import marked from 'marked';
```

Apart from this, to use the reference of the `<div [innerHtml]="content"></div>` we'll add Angular's [ViewChild](https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html) from `@angular/core`

```js
import { Component, ViewChild, Input } from '@angular/core';
```

And will add it *class HomePage* as follows:
```js

    @ViewChild(Content) content: Content;
```
After adding all these our `src/pages/home/home.ts` would look like below at this point:

```ts
import { Component, ViewChild  } from '@angular/core';
import { Content } from 'ionic-angular';

import { NavController } from 'ionic-angular';
import marked from 'marked';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;

  constructor(public navCtrl: NavController) {
    //console.log(marked('I am using __markdown__.'));
  }

  convert(this) {
    if(this.toggleVal==true){
      if(this.plainText && this.plainText!=''){
        let plainText = this.plainText
        this.markdownText = marked(plainText.toString())
        this.content = this.markdownText
      }else{
        this.toggleVal=false
      }
    }
  }
}
```

This basically sums up our whole app. Now, head towards the [http://localhost:8100](http://localhost:8100/) in your browser and you’ll see our pretty little app in action!

![](https://cdn-images-1.medium.com/max/1600/0*M7xvK-2UXuWJ4U9V.gif)

You can also check the whole codebase of this app over [here](https://github.com/amitmerchant1990/ionic-markdownify).

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 [Ionic Package](http://blog.ionic.io/build-apps-in-minutes-with-ionic-package/) and distribute the same.

For more information upon Ionic 2 you can follow this [documentation](http://ionicframework.com/docs/v2/components/#overview) and tweak your way through a whole lot of Ionic 2 components.

Thanks for reading.