Ionic 4 - ion-skeleton-text

Over the years, a lot has been said about bounce rate. In essence, you want as many people as possible to stay on your app/page for as long as possible.

One tactic you really should employ is to create something that is engaging for your users. The more they like your content, the more likely is it they will keep coming back - and stay longer.

One problem with that is the more people you compel to give you their time, the harder it becomes for your system to handle all that traffic.

You start improving your system to stay under some magical threshold of 3 seconds and all is looking good. Your app loads fast, doesn’t crash and overall performs as you want it to.

But there is always something extra you can do to can do to shorten the time from app start to app use for your user even if it’s just perceived as being shorter.

Let there be code

Let’s create a blank Ionic project and check a cool new feature in Ionic 4 - ion-skeleton-text.

> ionic start ion-skeleton-text blank

Let’s now go into the home.page.html file and add the content

<!-- home.page.html -->
<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

We also need some content which we will display with some delay.

// home.page.ts
export class HomePage implements OnInit {
  items: Array<string>;
  constructor() {}

  ngOnInit(): void {
    setTimeout(() => {
      this.items = [
        'Berlin',
        'Buenos Aires',
        'Madrid',
        'New York',
        'Paris',
        'Sydney',
        'Tokyo'
      ];
    }, 2500);
  }
}

If you now execute

> ionic serve

you will see something like this

No loading indication

No loading indication

Adding a loading screen

In order to let the user know that something is going on in the background, we could add a loading indicator which we would remove once the data has been loaded.

// home.page.html
export class HomePage implements OnInit {
  items: Array<string>;
  constructor(private loadingController: LoadingController) {}

  ngOnInit(): void {
    this.loadData();
  }

  async loadData(): Promise<void> {
    const loading = await this.loadingController.create({
      message: 'Loading cities...'
    });

    await loading.present();

    setTimeout(() => {
      this.items = [
        'Berlin',
        'Buenos Aires',
        'Madrid',
        'New York',
        'Paris',
        'Sydney',
        'Tokyo'
      ];

      loading.dismiss();
    }, 2500);
  }
}

I won’t go into the fact that displaying a loading screen should be handled separately because that’s not the point of this post but I know you would never push code like this ;)

Now if we save and check out our browser again we will see a nice loading screen.

Loading screen

Loading screen

Let’s make it a little better

One thing that we know about loading screens is that we don’t really like them. Loading screens on games, apps or anywhere else is something that starts to annoy us quite quickly so we have to keep them as short as possible or remove them completely.

We can try to trick people into believing that the app is already in the process of displaying some content when in fact it’s still waiting for the server to respond. In some cases, it’s just enough to let your users feel like the app is working to make them happy.

When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That’s relativity
— Albert Einstein

If we can display to the user something to keep them happy until they get what they came for we can keep them engaged for longer.

ion-skeleton-text is the answer

ion-skeleton-text is a new UI component which displays a placeholder content instead of the true one.

Implementing it is very straight-forward as you will see soon. Let’s dive right into it.

<!-- home.page.html -->
<ion-content>
  <ion-list *ngIf="items; else skeleton">
    <ion-item *ngFor="let item of items">
      {{ item }}
    </ion-item>
  </ion-list>
</ion-content>

<ng-template #skeleton>
  <ion-list>
    <ion-item *ngFor="let item of [50, 20, 70, 80, 50]">
      <p [ngStyle]="{ width: item + '%' }">
        <ion-skeleton-text animated></ion-skeleton-text>
      </p>
    </ion-item>
  </ion-list>
</ng-template>

What we do here is to simply show the items once they are set (after the 2500 ms) while displaying a few placeholder items in the mean-time.

We also got rid of the loading screen code again in the home.page.ts file to make it look like it was before.

// home.page.ts
export class HomePage implements OnInit {
  items: Array<string>;
  constructor() {}

  ngOnInit(): void {
    this.loadData();
  }

  async loadData(): Promise<void> {
    setTimeout(() => {
      this.items = [
        'Berlin',
        'Buenos Aires',
        'Madrid',
        'New York',
        'Paris',
        'Sydney',
        'Tokyo'
      ];
    }, 2500);
  }
}

Now if you save all you will see something like this:

Skeleton text

Skeleton text

This looks a lot more dynamic than having just a simple spinner and loading message. If you are displaying complex data you can even take advantage of two other cool Ionic component - ion-avatar and ion-thumbnail.

Let’s create one final skeleton-text item which will represent some more complex data.

<!-- home.page.html -->
<ion-content>
  <ion-list *ngIf="items; else skeleton">
    <ion-item *ngFor="let item of items">
      <ion-thumbnail slot="start">
        <img [src]="item.image" />
      </ion-thumbnail>
      <ion-label>
        <h3>City: {{ item.city }}</h3>
        <p>Country: {{ item.country }}</p>
        <p>Population: {{ item.population }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

<ng-template #skeleton>
  <ion-list>
    <ion-item *ngFor="let item of [1, 2, 3, 4, 5]">
      <ion-thumbnail slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-thumbnail>
      <ion-label>
        <h3>
          <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
        </h3>
        <p>
          <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
        </p>
        <p>
          <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
        </p>
      </ion-label>
    </ion-item>
  </ion-list>
</ng-template>

The typescript code has change also a little:

export class HomePage implements OnInit {
  items: Array<any>;
  constructor() {}

  ngOnInit(): void {
    this.loadData();
  }

  async loadData(): Promise<void> {
    setTimeout(() => {
      this.items = [
        { city: 'Berlin', country: 'Germany', population: '3.5 million', image: '...' },
        { city: 'Buenos Aires', country: 'Argentina', population: '15 million', image: '...' },
        { city: 'Madrid', country: 'Spain', population: '3.3 million', image: '...' },
        { city: 'New York', country: 'USA', population: '19.5 million', image: '...' },
        { city: 'Paris', country: 'France', population: '2.2 million', image: '...' },
        { city: 'Sydney', country: 'Australia', population: '5.4 million', image: '...' },
        { city: 'Tokyo', country: 'Japan', population: '9.2 million', image: '...' }
      ];
    }, 2500);
  }
}

The final result looks now like this:

A more complex example

A more complex example

Now that’s pretty, isn’t it?

The ion-skeleton-text UI component can add a little twist to your app and give the user something shiny to look at while your app does all the heavy lifting. It will keep them focused on something until the final content loads fully and you are able to display it. Giving the user the feeling that the app is running instead of waiting will make them come back and will give you more users to serve.

If you want to check out the code, have a look at it here.

Until next time,
happy coding.

Simple multi level menu in Ionic/Angular

While working on a project, a new requirement emerged where the client wanted to have a multi level menu displayed. After some digging around I didn’t find anything that was simple enough. Pretty much all of them were using some kind of id + level tags on menu items which then helped them know if they should expand something or not.

I like to keep things as simple as possible so I tried to take advantage of Angular’s component system and build something a little easier to understand.

Hello world (kind of)

Let’s first create an Ionic app with a predefined side menu and move from there. You just need to run this command in your terminal and Ionic will do the rest.

> ionic start multilevel-menu sidemenu

Now you can start your app with the following command

> ionic serve

This will start your (default) browser and you should see something like this:

What we start with

What we start with

Looks nice, but nothing too exciting.

1. Housekeeping

Before we start, let’s remove a bunch of things before we start. Let’s remove everything referencing list. Remove the entire list folder as well as all of it’s traces from the app.components.ts and app-routing.module.ts files. If you rerun ionic serve now, you will see just a single home menu item.

2. Creating a model

What better thing to have as a model for our multi level menu than a restaurant menu. Unfortunately, restaurant menus can get quite complicated but it will serve our needs perfectly.

We will create a very simple model with just three properties: name, id, and children. Create a new folder inside the app folder and name it models. Add another file, named menu-item.ts into it.

//src/app/models/menu-item.ts

export class MenuItem {
  name: string;
  id: number;
  children: Array<MenuItem>;
}

3. Creating some data

Based on this model, let’s creating some data for our app to use. We will create another folder named data inside the assets folder and add a new menu-items.ts file into it with the following content

//src/assets/data/menu-items.ts

export const menuItems = [
  {
    name: 'Appetizers',
    id: 1,
    children: [
      {
        name: 'Fresco Salsa',
        id: 6,
        children: null
      }
    ]
  },
  {
    name: 'Main dishes',
    id: 2,
    children: [
      {
        name: 'Beef',
        id: 7,
        children: [
          {
            name: 'Crispy Orange Beef',
            id: 10,
            children: null
          }
        ]
      },
      {
        name: 'Burger',
        id: 8,
        children: [
          {
            name: 'Chorizo Burger',
            id: 11,
            children: null
          }
        ]
      },
      {
        name: 'Vegetarian',
        id: 9,
        children: [
          {
            name: 'Chile Rellenos',
            id: 12,
            children: null
          }
        ]
      }
    ]
  },
  {
    name: 'Side dishes',
    id: 3,
    children: [
      {
        name: 'Baked potato',
        id: 13,
        children: null
      }
    ]
  },
  {
    name: 'Salads',
    id: 4,
    children: [
      {
        name: 'Taco Slaw',
        id: 14,
        children: null
      }
    ]
  },
  {
    name: 'Desserts',
    id: 5,
    children: [
      {
        name: 'Crepes',
        id: 15,
        children: null
      }
    ]
  }
];

It’s a mix of everything, so I hope there is something for you in this menu as well!

4. Final work before the good stuff

The last thing we have to do is go back to our app.component.ts and replace appPages with our new menuItems

//src/app/app.component.ts

import { menuItems } from '../assets/data/menu-items';

// ...

export class AppComponent {
  private menu = menuItems;
  // ...
}

The last thing we have to do is to remove the old markup used to render the menu and replace it with something simpler (for now). Let’s go into the app.component.html file and do that right now.

<!--src/app/app.component.html-->

<ion-menu-toggle auto-hide="false" *ngFor="let menuItem of menu">
  <ion-item>
    {{menuItem.name}}
  </ion-item>
</ion-menu-toggle>

Saving everything you should see your new menu in all it’s glory.

The first level of menu items

The first level of menu items

It’s pretty, isn’t it?

5. Brainstorming

Let’s think about how we are going to proceed here. From the model we can see that we have a menu item that can hold a bunch of menu items and so on.

What we will do then is to create a component which will pass its children to another component of the same type.

If the current component doesn’t have any children it’s a dish and we will display a simple button for the user to tap on, otherwise it’s just a category and we will display it differently.

6. Creating the component

If you are like me you don’t know all the bits and pieces a component needs right away. Lucky for us Ionic and Angular have us covered. Just switch to your terminal and type in the following command

> ionic g c menu-item

This will tell the Ionic (and underlying Angular) CLI to g(enerate) a new c(omponent) named menu-item.

We, also, need to let Ionic know about our new component so we will add it into the declarations array of the app.module.ts file.

//src/app/app.module.ts

import { MenuItemComponent } from './menu-item/menu-item.component';

// ...

@NgModule({
  declarations: [AppComponent, MenuItemComponent],
  
  /// ...
}

Let’s change the markup in app.component.html file to use the new component:

<!--src/app/app.component.html-->

 <ion-menu-toggle auto-hide="false" *ngFor="let menuItem of menu">
   <!-- <ion-item>
     {{menuItem.name}}
   </ion-item> -->
   <app-menu-item></app-menu-item>
 </ion-menu-toggle>

Saving it all now will result in this:

Looks like my CS degree is paying off

Looks like my CS degree is paying off

There is one last step until we can call it a day…

7. Finishing the component

As we discussed above, if the current menu item has children, we want it to display its name and pass its children down to another component of the same type. If there are no children, display a button which the user can click.

The final component will look something like this:

<!--src/app/menu-item/menu-item.component.html-->

<div>
  <p *ngIf="menuItem.children; else finalItem">
    <ion-button
      [color]="isRoot ? 'primary' : 'secondary'"
      [expand]="isRoot ? 'full' : 'block'"
      (click)="isOpen = !isOpen"
    >
      {{ menuItem.name }}
    </ion-button>

    <span *ngIf="isOpen">
      <app-menu-item
        *ngFor="let item of menuItem.children"
        [menuItem]="item"
      ></app-menu-item>
    </span>
  </p>
</div>

<ng-template #finalItem>
  <p>
    <ion-button color="light" expand="full" 
                (click)="onMenuItemSelected(menuItem)">
      {{ menuItem.name }}
    </ion-button>
  </p>
</ng-template>

The trick here is simply to toggle each component’s isOpen property and toggle between showing and hiding the children. Also, if you aren’t familiar with the if - else syntax from here, check out one of my previous posts.

Let’s just clean up the app.component.html a little and we are done

<!--src/app/app.component.html-->

<app-menu-item
  *ngFor="let menuItem of menu"
  [menuItem]="menuItem"
  [isRoot]="true">
</app-menu-item>

The final product will look like this:

Final multile level menu

Final multile level menu


If you had trouble following along, or just want to see the code fully. You can check it out here.

Until next time,
happy coding.

Adding timestamps to photos

While working on an Ionic project, the client asked for a timestamp to be added at the bottom of a taken photo.

After some head scratching, I ended up with the solution below.

onTakePhoto(): void {
  const options: CameraOptions = {
    quality: 30,
    destinationType: this.camera.DestinationType.DATA_URL,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE,
    targetWidth: 2304,
    targetHeight: 1728
  };

  this.camera.getPicture(options).then(
    (imageData) => {
      this.generateImageWithTimestamp("data:image/jpeg;base64," + imageData);
    },
    (error) => {
      // not important now
    }
  );
}

generateImageWithTimestamp(dataUrl: string): void {
  let image = new Image();
  image.onload = () => {
    let canvas = document.createElement("canvas");
    let context = canvas.getContext("2d");

    canvas.height = image.height;
    canvas.width = image.width;

    context.drawImage(image, 0, 0);

    //adding some styling
    context.font = "80px Arial bold";
    context.textAlign = "center";
    context.fillStyle = "orange";
    context.fillText(
      this.getTimeStamp(),
      image.width / 2, //center
      image.height * 0.97 //close to the bottom
    );

    const finalImage = canvas.toDataURL("image/jpeg", 1);
  };
  image.src = dataUrl;
}

getTimeStamp(): string {
  const date = new Date();

  return `${date.getDate()}. ${date.getMonth() +1}. ${date.getFullYear()}, ${date.getHours()}:${date.getMinutes()}`;
}

We simply take a photo, redraw it on a canvas where we also add the timestamp.

One thing to keep in mind here is that order is important.

In my first attempt I first added the text and then the image which, of course, has overwritten the text. It looks obvious now but it took me a little to figure it out.

Hope this will help you out.

Until next time,
Happy coding.

Deciphering error messages in Ionic

While working on some projects which use the camera to take pictures inside the app I had to add a description for the user to ask for permission.

The code for that is pretty simple:

<edit-config file="*-Info.plist" mode="merge" target="NSPhotoLibraryUsageDescription">
   <string>Please let me take pictures</string>
</edit-config>

After that I wanted to build the application for iOS with the following command:

ionic cordova build ios

What usually finished after 10 seconds with a success message now ended like this:

Now that’s what I call an error message!

Now that’s what I call an error message!

If you are like me you would have no idea what this means. Trying to build again doesn’t solve the problem so it has to be something with this particular change.

After a little bit of digging around I found the fix.

Go into the platforms folder and into ios. There you will find ios.json which holds configurations for the entire application. Locate *-Info.plist and delete the entire object.

After that simply run:

ionic cordova prepare ios

Your build will work again and you can get on with finish your app.

Hope this helps.

Until next time,
happy coding.

Getting enum keys in TypeScript

They can be your friend..

They can be your friend..

While working on a task, my colleague stumbled upon a quirky problem.

He tried to fetch all keys out of an enum but ended up with both the keys and values. We tried figuring out why this happens and once we saw the compiled javascript everything was clear.

Let’s have a look:

enum SomeEnum { 
    A,
    B,
    C,
    D
}

The enum above will be transpiled into:

var SomeEnum;
(function (SomeEnum) {
    SomeEnum[SomeEnum["A"] = 0] = "A";
    SomeEnum[SomeEnum["B"] = 1] = "B";
    SomeEnum[SomeEnum["C"] = 2] = "C";
    SomeEnum[SomeEnum["D"] = 3] = "D";
})(SomeEnum || (SomeEnum = {}));

The thing here that is important is to realize that with this output the final object will have A, B, C, and D as keys as well as 0, 1, 2, and 3.

Because of the SomeEnum[“A”] = 0 assignment we will create a property “A” with the value of 0 and then (as part of the larger SomeEnum[SomeEnum["A"] = 0] = "A"; assignment) create a property “0” with the value of "A” .

If you try to get the keys (with Object.keys()) you will get the mentioned A, B, C, D, 0, 1, 2, and 3.

To get only they keys or member names you can do something like this:

let enums = Object.keys(SomeEnum).filter(x => !(parseInt(x) >= 0));
console.log("Enums", enums); //Enums: A, B, C, D

Hope this will help you out in your TypeScript quest.

Until next time.

Happy Coding!

Error when creating a new Ionic project - ZlibError

Now that Ionic 4(!!!) is out I wanted to take it for a ride. I opened up VS Code and entered the following command into the terminal

> ionic start ionic4test tabs

After a second or two the process stopped with the following error

- Downloading and extracting tabs starter (100.00%)
events.js:193
      throw er; // Unhandled 'error' event
      ^

ZlibError: zlib: Cannot read property 'length' of null
    at Unzip.Zlib.(anonymous function) (C:\Users\Ivan Karacic\AppData\Roaming\npm\node_modules\ionic\node_modules\minizlib\index.js:126:21)
    at Unzip.write (C:\Users\Ivan Karacic\AppData\Roaming\npm\node_modules\ionic\node_modules\minizlib\index.js:247:21)
    at Unzip.flush (C:\Users\Ivan Karacic\AppData\Roaming\npm\node_modules\ionic\node_modules\minizlib\index.js:206:10)
    at Unzip.end (C:\Users\Ivan Karacic\AppData\Roaming\npm\node_modules\ionic\node_modules\minizlib\index.js:213:10)
    at Unpack.end (C:\Users\Ivan Karacic\AppData\Roaming\npm\node_modules\ionic\node_modules\tar\lib\parse.js:416:21)
    at IncomingMessage.onend (_stream_readable.js:598:10)
    at Object.onceWrapper (events.js:322:30)
    at emitNone (events.js:120:20)
    at IncomingMessage.emit (events.js:218:7)
    at endReadableNT (_stream_readable.js:1054:12)

I first tried updating the minizlib Node module but that didn’t help.

After some random web searches I found out what the issue is.

A simple upgrade to a 10+ Node.js version did the trick.

It took me around 30 minutes to figure this one out so I hope that this might help you get to the answer a little quicker.

Until next time,
happy coding.

Passing data back from a child page (Ionic tips and tricks)

When working with Ionic (3), I came across the need to pass between pages.

Full steam ahead!

Here is what the Ionic docs have to say about it:

push(page, params, opts) 

//Push a new component onto the current navigation stack.
//Pass any aditional information along as an object.
//This additional information is accessible through NavParams

Let’s try it out!

export class StartPage {
    constructor(public navCtrl: NavController) {
    }

    pushPage(): void {
        this.navCtrl.push(OtherPage, {
          id: "123",
          name: "Carl"
        });
    }
}

class OtherPage {
    constructor(private navParams: NavParams) {
        let id = navParams.get('id');
        let name = navParams.get('name');
    }
}

As you can see above, it’s quite straight forward. You push a new component on the navigation stack and pass an object as your navigation parameter and then get those parameters in the child page.

Going back the other way

There might be situations where you want to pass data from your child page to the parent. The user might select something and you want this information in the parent to fill out a form for example.

That’s where things get a little tricky.

Here the documentation say:

pop(opts) 
//Call to navigate back from a current component.
//Similar to push(), you can also pass navigation options.

However, those navigation options don’t offer you all that much

Property   Value    Description
animate    boolean  Whether or not the transition should animate.
animation  string   What kind of animation should be used.
direction  string   The conceptual direction the user is navigating. For example, is the user navigating forward, or back?
duration   number   The length in milliseconds the animation should take.
easing     string   The easing for the animation.

We will have to come up with some other way of passing data back to the parent.

The bad

Two approaches I don’t like at all are: having a global object and having some kind of pub/sub mechanism.

When you maintain a global object which will keep informations for all pages to be read from things can get quite complicate. Once your application gets quite large this starts to look like a mess and having a single file grow to a few hundreds or even thousands of lines (I have worked once on a project that had a globalSettings object was a nightmare) is not really something to look up to.

Another approach is to have some kind of pub/sub functionality where one page would publish/broadcast something and then all other views would just pick it up update their state. I don’t really like this approach since you, again, rely on a single object to take care of everything.

The good

One solution I like quite a lot is the use of Promises. You pass the resolve callback as a parameter to the child view and once the view pops you execute the resolve callback and pass data to the parent.

Your code could look something like this:

export class StartPage {
    constructor(public navCtrl: NavController) {
    }

    pushPage(){
        new Promise((resolve, reject) => {
            this.navCtrl.push(OtherPage, {
                id: "123",
                name: "Carl",
                resolve: resolve
            });
        }).then((data) => {
          console.log(data); // 'some data'
        });
    }
}

class OtherPage {
    private resolve: Function;
    constructor(private navParams: NavParams) {
        let id = navParams.get('id');
        let name = navParams.get('name');
        resolve = navParams.get('resolve'); 
    }
    
    returnData(): void {
        this.navCtrl.pop().then(() => this.resolve('some data'))
    }   
}

This looks nice and there isn’t a lot of overhad involved but, unfortunately, couples your parent its child.

My favorite approach

One thing that bugs me about the above approach is the new Promise we have to create and then wire up to get it working. That’s why the next approach is by far my favorite:

export class StartPage {
    constructor(public navCtrl: NavController) {
    }

    pushPage(): void {
        this.navCtrl.push(OtherPage, {
          id: "123",
          name: "Carl",
          callback: this.handleChildPage
        });
    }
    
    handleChildPage(data): void {
        console.log(data); // 'some data'
    }
}

class OtherPage {
    private callback: Function;
    constructor(private navParams: NavParams) {
        let id = navParams.get('id');
        let name = navParams.get('name');
        callback = navParams.get('callback'); 
    }
    
    returnData(): void {
        this.callback('some data');
        this.navCtrl.pop();
    }   
}

It doesn’t look much different than the solution with promises but I like this one a little more because we have avoided two .then(…) statements which make the code look a little more cluttered than I like. But, just as the example above, this one also couples your two views and that’s something we will have to live with (for now).

The ideal solution

I am looking forward where we will be able to pass navParams into the pop function and then just pick them up in the parent and use them.

Let me know about your approaches in the comments below.

Until next time,

Happy coding

Showing image only when fully loaded (Angular 1)

While working for a client, a requirement came up requesting for images only to be visible when fully downloaded.

The reason for this is that currently the images would load line by line which doesn't look quite nice. 

I started playing around a little but nothing worked as I would have liked, so I had to go deeper.

inceptius-meme-generator-we-have-to-go-deeper-014848.jpg

Directives to the rescue!

I ended up creating a new directive and hooked it up in my markup.

//.js
angular.module('app', [])
.directive("dynamicImage", function () {
  return {
    restrict: 'E', //restrict only to elements
      scope: {
        imageSource: '=src' //hook up to the outside scope
      },
      template: '<img ng-show="showImage" src="{{ imageSource }}">',
      //get the element and bind to the load event
      link: function ($scope, iElm, iAttrs, controller) {
        $scope.showImage = false;
        iElm.find('img').bind('load', function (e) {
        //when loaded show the image            
        $scope.$apply('showImage = true');
       });
    }
  }
});

//.html
//keep in mind that you don't need interpolation here
//so pass only the property without the '{{}}'
<dynamic-image src="propertyHoldingTheImageSource"></dynamic-image>

If you try it out now you won't see the image until fully loaded. 

To enhance the user experience a little more you can add a background image to the parent <div> which can serve as a placeholder but this is a topic for another time :)

Until then, happy coding!

*ngIf in Angular with a twist

Showing and hiding content in is usually done by using the *ngIf directive:

<p *ngIf="isButtonClicked">Button is clicked!</p>

If you want to display something if the condition isn't satisfied you would probably do something like this:

<p *ngIf="isButtonClicked">Button clicked!</p>
<p *ngIf="!isButtonClicked">Button not clicked</p>

This looks a little clumsy and, also, forces you to repeat yourself. You are biding to the same property and if the name changes you will have to change it in multiple places - not a good thing to do.

A more elegant way of achieving the same thing looks can be seen below:

<p *ngIf="isButtonClicked; else buttonNotClicked">Button clicked!</p>

<ng-template #buttonNotClicked>
    <p>Button not clicked :(</p>
</ng-template>

The final result can be seen here:

ngif.gif

One added benefit is that you can handle these special cases anywhere in your file and Angular will do the rest

Simulating geolocation changes in the VisualStudio Emulator for Android

For almost a year now I have been developing a few mobile applications using Apache Cordova. It's a pretty nice technology (as far as writing HTML and CSS for mobile devices can be) and I have written a few blog posts about it already.

Developing Cordova apps in Visual Studio 2015 is really cool. You get all the power Visual Studio can offer you (despite sometimes hanging or freezing) and on top of that you get excellent emulators created by Microsoft which are miles ahead of the ones Google offers (Genymotion is in second place but I have some problems setting it up on my machine so I can't really talk about it a lot).

While working on my latest project I had to use Geolocation to simulate users movements on streets.

"Easy-peasy", I thought and dug right into it. I downloaded the geolocation plugin (everything is done with plugins in Cordova) and wrote a little piece of code.

    function onSuccess(position) {
      var element = document.getElementById('geolocation');
      element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +
                          'Longitude: ' + position.coords.longitude + '<br />' +
                          'Speed: ' + position.coords.speed + '<br />' +
                          'Heading: ' + position.coords.heading + '<br />' +
                          '<hr />';
    }

    function onError(error) {
      alert('code: ' + error.code + '\n' +
            'message: ' + error.message + '\n');
    }

    var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
      timeout: 30000
    });

What this essentially does is hook up to the geolocation plugin and wait for 30 second to get something back from it. If it get something I grab an element with the ID geolocation and display some information, otherwise I show an error message letting the user know something's wrong.

Another awesome feature of the Visual Studio emulator for Android is the Location tab which lets you pick a route and then select the speed at which you want to move along the route.

I set up my route, hit start and ... nothing happened. What the %$&#??? What's going on? I hook up a phone to my PC and just start it up and ... it works like expected. What the %$&#???

You can imagine how puzzled I was but as I had to get my work done I started working exclusively on the device until I couldn't get away anymore without "moving" on the road.

I asked for help on StackOverflow but the solutions there didn't really help me. Another week passed and I finally found the solution I was looking for.

I looked once again into the docs for the Cordova plugin and I found that the watchPosition function accepts a few more options apart from timeoute.

One of them was enableHighAccurac. The docs say this about this option.

enableHighAccuracy: Provides a hint that the application needs the best possible results. By default, the device attempts to retrieve a Position using network-based methods. Setting this property to true tells the framework to use more accurate methods, such as satellite positioning. (Boolean)

Application needs the best possible results? Sign me up for that!

I added this option to the watchPosition function so that it now looks like this:

    var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
      timeout: 30000,
      enableHighAccuracy: true 
    });

And lo and behold the damn thing spits out my new position, speed, heading and a lot of other information my way.

I guess that by setting enableHighAccuracy to true forces the phone to use GPS to get it's location and that was what the Location tool was providing from the beginning.

Usually your phone tries a lot of other methods to get it's position (WiFi signals, your carriers antennas, etc.) because they all drain your batter less then listening to the GPS satelites but since this is running on an emulator we have to relay only on the GPS signal which is generated by the phone so we have to tell the phone to ignore the battery and go straight to GPS.

This has been really a frustrating two weeks where I was trying a ton of different things to get this working but I found the light at the end of the tunel and really hope that at least someone will save a few days of research by reading this.

Until next time, happy coding :)