Ionic NFC Example

Ionic Framework ionic-v3
23

If you are running on latest ionic version then i think, it is asking to use async function to the code, check the below function, my code is working but the only problem that my tag id is not displaying and also the content inside.

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

@Component({
selector: ‘app-tabs’,
templateUrl: ‘tabs.page.html’,
styleUrls: [‘tabs.page.scss’]
})
export class TabsPage {
tagid: any;
tagdesc: any;
constructor(public platform: Platform,
private alertCtrl: AlertController,
private toastCtrl: ToastController,
public navCtrl: NavController,
private nfc: NFC,
private ndef: Ndef) {
this.platform.ready().then(() => {
this.addListenNFC();
});
}
async addListenNFC() {
console.log(‘enter into a addListenNFC’);

  await this.nfc.addNdefListener(() => {
    console.log('successfully attached ndef listener');
  }, async (err) => {
    console.log('error attaching ndef listener', err);

    let toast = await this.toastCtrl.create({
      message: err,
      duration: 1000,
      position: 'bottom'
    });

    return await toast.present(); 

  }).subscribe(async (event) => {
    console.log('received ndef message. the tag contains: ', event.tag);
    console.log('decoded tag id', this.nfc.bytesToHexString(event.tag.id));
    this.tagid = this.nfc.bytesToHexString(event.tag.id);
    //this.tagdesc = event.tag.ndefMessage;

    let toast = await this.toastCtrl.create({
      message: this.nfc.bytesToHexString(event.tag.id),
      //message: this.nfc.bytesToHexString(event.tag.ndefMessage[0].payload) && " --- " && this.nfc.bytesToHexString(event.tag.id) ,
      duration: 5000,
      position: 'bottom'
    });

    return await toast.present(); 
  });

}

}

24

Now am getting the inside content aswell, but again i cant able to read Mifare Classic, only can read Mifare Ultralight Nfc Tags, that is one more issue,
Please let me know if one have the same issue and its solved.

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

@Component({
selector: ‘app-tabs’,
templateUrl: ‘tabs.page.html’,
styleUrls: [‘tabs.page.scss’]
})
export class TabsPage {
tagid: any;
tagdesc: any;
constructor(public platform: Platform,
private alertCtrl: AlertController,
private toastCtrl: ToastController,
public navCtrl: NavController,
private nfc: NFC,
private ndef: Ndef,
private cdr: ChangeDetectorRef) {
this.platform.ready().then(() => {
this.addListenNFC();
});
}
addListenNFC() {
console.log(‘enter into a addListenNFC’);
this.tagid = “”;
this.tagdesc = “”;

  this.nfc.addNdefListener(() => {
    console.log('successfully attached ndef listener');
  }, async (err) => {
    console.log('error attaching ndef listener', err);

    let toast = this.toastCtrl.create({
      message: err,
      duration: 1000,
      position: 'bottom'
    });

    return (await toast).present(); 

  }).subscribe(async (event) => {
    console.log('received ndef message. the tag contains: ', event.tag);
    console.log('decoded tag id', this.nfc.bytesToHexString(event.tag.id));
    this.tagid = "";
    this.tagdesc = "";
    let tagId = await this.nfc.bytesToHexString(event.tag.id);
    this.tagid = tagId;
    if (event.tag.ndefMessage) {
    let payload = event.tag.ndefMessage[0].payload;
     let tagContent = await this.nfc.bytesToString(payload).substring(3);
     this.tagdesc = tagContent;
    }

    let toast = this.toastCtrl.create({
      message: this.nfc.bytesToHexString(event.tag.id),
      //message: this.nfc.bytesToHexString(event.tag.ndefMessage[0].payload) && " --- " && this.nfc.bytesToHexString(event.tag.id) ,
      duration: 5000,
      position: 'bottom'
    });
    (await toast).present(); 
    this.cdr.detectChanges();
  });

}

}

25

Hi @sultanwasif , did you can finally read Mifare Classic ???