Ionic NFC Example

DalbirSingh · January 4, 2017, 6:26pm

Is there any example for consuming cordova nfc pulgin in ionic2 with angular2

DalbirSingh · January 20, 2017, 7:18pm

Ok! I have found solution.

TimmyCass · February 27, 2017, 10:59pm

Could you post your solution or any referances you have found please, anything would be much apreciated

Dalbir · February 28, 2017, 5:59am

Follow these steps -

Add phonegap-nfc
import { NFC, Ndef } from ‘ionic-native’;
Initialize NFC ( I am using Device Ready Event i.e

this.platform.ready().then(() => { this.cekNFC();
});

cekNFC() {
NFC.enabled()
.then(() => {
this.addListenNFC();
})
.catch(err => {
let alert = this.alertCtrl.create({
subTitle: this.translate.instant(‘NFC_DISABLED_ON_NFC’),
buttons: [{ text: this.translate.instant(‘OK’) }, {
text: this.translate.instant(“GO_SETTING”),
handler: () => {
NFC.showSettings();
}
}]
});
alert.present();
});
}

addListenNFC() {
    NFC.addTagDiscoveredListener(nfcEvent => this.sesReadNFC(nfcEvent.tag)).subscribe(data => {
        if (data && data.tag && data.tag.id) {
            let tagId = NFC.bytesToHexString(data.tag.id);
            if (tagId) {
                this.nav.setRoot(PayerCard, { "TagID": tagId });
            } else {
                this.showToast(this.translate.instant('NFC_NOT_DETECTED'))
            }
        }
    });
}

sesReadNFC(data): void {
    this.showToast(this.translate.instant('NFC_WORKING'))
}

failNFC(err) {
    this.showToast('NFC Failed :' + JSON.stringify(err))
}

Dalbir · February 28, 2017, 4:05pm

@TimmyCass , is it helpfull?

pimol · May 24, 2017, 10:19am

@DalbirSingh, it’s very helpful. I wonder if I have to extract the specifications of the NFC object from the examples I find on the net or if there is (somewhere) some kind of document. I find tag.id only when I read your example.

faizan1990 · June 8, 2017, 4:09am

@Dalbir Can you please confirm how are you adding phonegap-nfc. I am following the tutorial over here: https://ionicframework.com/docs/native/nfc/ but it seems it’s for Angular 1 (Ionic 1). Thanks.

Dalbir · June 8, 2017, 4:25am

I am using this https://github.com/chariotsolutions/phonegap-nfc

faizan1990 · June 8, 2017, 4:35am

Thanks very much for providing the resource. The moment I use

private nfc: NFC,
private ndef: Ndef

in constructor of my .ts file, the page in my app (where I am using NFC) doesn’t open. When I remove these two private parameters, everything works fine. Are you doing it some other way?

Dalbir · June 8, 2017, 4:55am

Steps are :

In app.component.ts file I have imported “NFC, Ndef” from 'ionic-native
like
import { StatusBar, Splashscreen, NFC, Ndef, Device } from ‘ionic-native’;

2.and then call following code in constructor


NFC.addTagDiscoveredListener(nfcEvent =>
this.sesReadNFC(nfcEvent.tag)).subscribe(data => {
            if (data && data.tag && data.tag.id) {
                let tagId = NFC.bytesToHexString(data.tag.id);
                if (tagId) {
                    this.showToast(tagId)
                    if (this.ApplicationService &&
this.ApplicationService.SmartCardLinking) {
                        //this.nav.setRoot(PayerPropertyLinking, { "TagID":
tagId });
                    } else {
                        //this.nav.setRoot(PayerCard, { "TagID": tagId });
                    }

                } else {

this.showToast(this.translate.instant('NFC_NOT_DETECTED'))
                }
            }
        });

irvinglee1984 · July 12, 2017, 8:03am

Some how when i’m using your method addTagDiscoveredListener i couldn’t read the content that its inside the Tag and i think i only got UID of the tag. So I changed to addNdefListener and it works fine for me

Here is my method:

        this.nfc.addNdefListener().subscribe(data => {
            if (data && data.tag && data.tag.id) {      
                if (data.tag.ndefMessage) {
                    let toast = this.toastCtrl.create({
                        message: 'NFC Tag found',
                        duration: 1000,
                        position: 'bottom'
                    });

                    toast.present();

                    let payload = data.tag.ndefMessage[0].payload;
                    let tagContent = this.nfc.bytesToString(payload).substring(3);
                    console.log(tagContent);
                    
                } else {
                    let toast = this.toastCtrl.create({
                        message: 'NFC Tag not found',
                        duration: 1000,
                        position: 'bottom'
                    });

                    toast.present();

                }
            }
        });

yamurkahtan · August 15, 2017, 2:00pm

I wish that you show the code and define platform and other contents better.

Sujan12 · August 16, 2017, 9:26am

I wish that you don’t talk in such an inappropriate way to users here that share their knowledge with all others here. Thank you.

yamurkahtan · August 16, 2017, 9:38am

I didn’t write inappropriate way. I asked politely to define some parameters and he responses to my request. Actually, I understand his answer better now and I apply his code and my NFC reader. The code is working now so big thanks to him (Dalbir).

Sujan12 · August 16, 2017, 9:57am

Then this probably got lost in translation - the way you wrote it sounds not very polite.

But great that his post helped you fix your problem.

yamurkahtan · August 16, 2017, 10:46am

Ok. I see now. Sorry for that then. Anyway thanks.

ikishan1 · February 6, 2018, 9:34am

what is sesReadNFC here ?

blackjackyau · October 18, 2018, 8:23am

I am using addNdefListener() as well but i am getting “new tag collected” popped out intermittently. Any clue ?

derman10 · February 1, 2019, 5:50pm

i’m stuck for weeks with NFC.

I honestly do not understand why it does not work.

I’m following your example but it does not work on my device Samsung SF Edge (NFC is Active)

Can you help me? my source…

home.ts

import { Component } from '@angular/core';
import { NavController, Platform, AlertController, ToastController } from 'ionic-angular';
import { NFC, Ndef } from '@ionic-native/nfc/ngx';

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

  constructor(public platform: Platform,
              private alertCtrl: AlertController, 
              private toastCtrl: ToastController,
              public navCtrl: NavController, 
              private nfc: NFC,
              private ndef: Ndef) {

    this.platform.ready().then(() => { 
      this.cekNFC();
    });

  } 


  cekNFC() {
    this.nfc.enabled().then(() => {
      this.addListenNFC();
    })
      .catch(err => {
      let alert = this.alertCtrl.create({
      subTitle:'NFC_DISABLED_ON_NFC',
      buttons: [{ text: 'OK' }, {
      text: 'GO_SETTING',
      handler: () => {
        this.nfc.showSettings();
      }
    }]
    });

    alert.present();
    });
    }  

    addListenNFC() {
      this.nfc.addTagDiscoveredListener(nfcEvent => this.sesReadNFC(nfcEvent.tag)).subscribe(data => {
          if (data && data.tag && data.tag.id) {
              let tagId = this.nfc.bytesToHexString(data.tag.id);
              if (tagId) {
                  this.tagId= tagId;
              } else {
                  let toast = this.toastCtrl.create({
                    message: 'NFC_NOT_DETECTED',
                    duration: 2000,
                    position: 'bottom'
                  });
                  toast.present();
                  
              }
          }
      });
    }
  
  sesReadNFC(data): void {
      let toast = this.toastCtrl.create({
        message: 'NFC_WORKING',
        duration: 2000,
        position: 'bottom'
      });
      toast.present();

  }
  
  failNFC(err) {
      let toast = this.toastCtrl.create({
        message: 'NFC Failed :' + JSON.stringify(err),
        duration: 2000,
        position: 'bottom'
      });
      toast.present();      
  }


} //class

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { NFC, Ndef } from '@ionic-native/nfc/ngx';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    NFC,
    Ndef,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

i’m getting this on console window:

nfc_error

Using anothers apps form Play Store, I can read the Tag Id from my card.

I hope you can help me.

Thanks.

swathicw · February 21, 2019, 8:32am

Hi,

Did you get any solution for this?

Even I am getting same error

Thanks.