QR code vCard in ANGULAR / IONIC

2018-08-06

So what is a vCard ? Basically it’s an electronic business card (read more here).
So here is an idea on how to implement a vCard inside your ANGULAR / IONIC projects. In my case I will be using IONIC.

After we generating our project we will need a library for our QR code. We’ll use angular2-qrcode. Let’s add that to our project

1	npm install angular2-qrcode

Don’t forget to add it to our app.module.ts file

import { NgModule } from '@angular/core';
import { QRCodeModule } from 'angular2-qrcode';

...

@NgModule({
    imports: [
        QRCodeModule,
        ...
    ]
})

Inside our home.html add this template

1	<qr-code [value]="vCardData" [size]="150"></qr-code>

Here we have your vCardData variable that we will use to store the vCard info so we can pass it to the qr-code generator.

Now let’s go in our home.ts file and inside ngViewAfterInit() create a vCardData property and make some fake info for the vCard.

1	vCardInfo:string;

And the fake info:

let name = 'John',
  surname = 'Doe',
  org = 'Google',
  url = 'www.google.com',
  email = '[email protected]',
  tel = '000 111 222';

Now that we have that done we can start creating the vCard object

this.vCardInfo = `BEGIN:VCARD
VERSION:3.0
N:${surname};${name}
FN:${surname} ${name}
ORG:${org}
URL:${url}
EMAIL:${email}
TEL;TYPE=voice,work,pref:${tel}
END:VCARD
`

Here we are passing the vCard object to our vCardInfo property so that the QR code will contain proper data and when we scan the code with a device it will create a contact inside our contact list.

One important fact about the vCard properties is that we need to make sure the object properties always begins at the start of the line for ex:

1	"BEGIN:VCARD"

Should be at the start not like this with indentation:

1	" BEGIN:VCARD"

Otherwise your vCard won’t work :).

And that’s it, if you have any questions please feel free to ask below. Cya in the next one.

Home.ts file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {  
  vCardInfo:string;
  constructor(public navCtrl: NavController) {
  }
  ngAfterViewInit(){
    let name = 'John',
    surname = 'Doe',
    org = 'Google',
    url = 'www.google.com',
    email = '[email protected]',
    tel = '000 111 222';

    this.vCardInfo = `BEGIN:VCARD
VERSION:3.0
N:${surname};${name}
FN:${surname} ${name}
ORG:${org}
URL:${url}
EMAIL:${email}
TEL;TYPE=voice,work,oref:${tel}
END:VCARD
`
  }
}