Guide to creating content on an NFC tag with Ionic

I am struggling with my button calling the test2 function and the code I have is not working as expected. Here is what I currently have:

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

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {

  constructor( private nfc: NFC, private ndef: Ndef,) {
  }

  test2(){
    this.nfc.addNdefListener(() => {
      console.log('successfully attached ndef listener');
    }, (err) => {
      console.log('error attaching ndef listener', err);
    }).subscribe(() => {      
      console.log("works");
      let message = [this.ndef.textRecord("hello, world")];
      this.nfc.share(message);
    }, err => console.log(err));
    
  }   
 
  }

Unfortunately, the subscribe method is not triggered when passing my NFC tag to it, even though the addNdefListener works fine. Can anyone help me troubleshoot this issue?

My setup includes IONIC 5.6 with capacitor, along with the native NFC plugin.

Your assistance would be greatly appreciated. Thank you!

Answer №1

nfc.share is specifically designed for Peer to Peer communication between two devices, but this feature has been discontinued in Android 10. If your Question Title mentions "writing on an NFC Tag," you should instead utilize the nfc.write function.

It's important to note that the NFC protocol used for Device to Device communication is distinct from the protocol used for communicating with NFC Tags.

Answer №2

After making the changes you suggested, unfortunately, it still didn't work. However, upon reviewing all the documentation again, I couldn't find any errors in my code. So, I made the decision to start a new project and rewrite my code from scratch. Surprisingly, this time it worked perfectly. It seems like the files may have been corrupted, but I was able to fix it. Thank you for your assistance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Original: Generic for type guard functionRewritten: Universal

I have successfully created a function that filters a list of two types into two separate lists of unique type using hardcoded types: interface TypeA { kind: 'typeA'; } interface TypeB { kind: 'typeB'; } filterMixedList(mixedList$: ...

Incorporating a picture backdrop into a button element in a React Typescript component

I am working on a React project with TypeScript and using a Material UI library. I am trying to set a background image for a button, but when I use src or imageURL, it gives me a TypeScript error. The CSS style also does not show the picture. Here is my ...

Add the Projector.js module using the Angular CLI

I've been working on a project using Angular CLI and incorporating three.js into it. I successfully imported three.js with import * as THREE from 'three';, but now I'm looking to add Projector.js as well. To include Projector.js, I adde ...

An issue occurred in React 16.14.0 where the error "ReferenceError: exports is not defined" was not properly

As the creator of the next-translate library, I have encountered a perplexing issue with an experimental version involving an error specifically related to React 16.14.0. Interestingly, upgrading React to version 17 resolves the issue, but I am hesitant to ...

What is the best way to execute an Nx executor function using Node.js?

Can a customized Nx executor function be executed after the app image is built? This is the approach I am taking: "migrate-up": { "executor": "@nx-mongo-migrate/mongo-migrate:up", "options": { &q ...

Angular: Keeping all FormControls in sync with model updates

I am dealing with a collection of FormControls that were created using FormBuilder: this.someForm = this.fb.group({ name: '', size: '', price: '', }); Is there an alternative method to update them based on ...

Using Typescript, invoke functions within an object by specifying a string key

I am looking for a way to call methods in an Object using string keys, but I'm facing issues with it. Could someone provide some solutions for this? type Methods = { foo?: (v: string) => string; bar?: (v: number) => number; baz?: (v ...

Error in hook order occurs when rendering various components

A discrepancy was encountered in React when attempting to render different components Warning: React has detected a change in the order of Hooks called by GenericDialog. This can result in bugs and errors if left unresolved. Previous render Next ren ...

Unable to locate the image file path in React.js

I'm having trouble importing images into my project. Even though I have saved them locally, they cannot be found when I try to import them. import {portfolio} from './portfolio.png' This leads to the error message: "Cannot find module &apos ...

What is the best way to distinguish between administrators and regular users in an Angular project?

I am embarking on a project using Angular and I plan to incorporate both an admin and a user section within it. Is there a way to effectively separate the admin area from the user area in Angular? Additionally, how can I differentiate the style files for ...

Is there a substitute for useState in a Next.js server component?

With my static site at , the only interactive feature being the dark mode toggle, I understand that using useState is not feasible in a server component. export default function RootLayout({ children }: { children: React.ReactNode }) { const [darkMode, ...

Rearranging data received from an Observable

TL;DR I am working on an Angular app where I need to shuffle an array of names retrieved from a network request and ensure that each group of 6 names selected is unique. However, I noticed duplicates in the selections. Here's a CodePen example using o ...

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript: <svg viewBox="0 0 200 200"> <circle cx="50" cy="50" r="45" id="myCircle"/> </svg> In ...

"Triggering a click event on the unordered list within an Angular 2

Looking to retrieve the class name when clicking on any item in a list. <ul id='color' name='color' class="choose-color" (click)=getColor()> <li class="color1"></li> <li class="color2"&g ...

What is the best way to create a dynamic icon using React and TypeScript?

Excuse me, I am new to using React and TypeScript. I'm having trouble getting the icon to change based on the status in AppointmentType. The body color is working fine, but the icons are not changing. Can someone please help me solve this issue? const ...

How to transfer the label text value from html to .ts file in Ionic 3?

Hey everyone! I just started using Ionic and I'm wondering how to pass the value of a label text from HTML to the .ts file. Here's a snippet of my code: <div class="box" (click)="openChatBot()"></div> <ion-label>LEADER ...

Pass a React component as a required prop in Typescript when certain props are necessary

I am currently working on a project where I need to create a custom TreeView component using React and Typescript. My goal is to have the ability to inject a template for each TreeNode in order to render them dynamically. My main challenge right now is fi ...

The functionality of Angular router is disrupted when guards yield an Observable as their return value

My goal is to redirect users who are not logged in when they try to access protected routes, but I am facing an issue with redirection. The function that checks if the user is logged in returns an Observable. Below is the code snippet from my PrivateGuard ...

Attempting to send numerous identifiers in an API request

I encountered a problem while working on a function in Angular that involves pulling data from an API. My goal is to enhance a current segment to accommodate multiple IDs, but I face difficulties when attempting to retrieve more than one ID for the API que ...