Genera código QR usando AngularJS

En este artículo, veremos cómo generar y mostrar códigos QR en nuestras aplicaciones Angular. Un código QR es una array de cuadrados en blanco y negro que puede ser leído por una cámara o un teléfono inteligente. Un código QR puede almacenar información y URL que facilitan la lectura para un bot o un usuario de teléfono inteligente. En un escenario comercial, los códigos QR se pueden usar para compartir información de contacto, enviar correos electrónicos, descargar aplicaciones, compartir direcciones URL y ubicación. Por lo tanto, necesitamos saber cómo generar uno para que nuestras aplicaciones se mantengan al día con el mercado.

Requisitos previos: NPM debe estar instalado

Configuración del entorno:

Instale CLI angular y cree un nuevo proyecto angular.

npm i -g @angular/cli
ng new <project-name>
cd <project-name>

Ahora, verifique la instalación sirviendo la aplicación en localhost:

ng serve -o

Debería ver la página de inicio de angular, y está listo para comenzar. Ahora necesitamos instalar y registrar un paquete adicional:

npm install @techiediaries/ngx-qrcode

Regístrelo en app.module.ts. Realice cambios o copie el código a continuación en el archivo app.module.ts en la carpeta de la aplicación.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
  
// Import this module 
import {NgxQRCodeModule} from '@techiediaries/ngx-qrcode'
  
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxQRCodeModule    // Register the module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ahora vamos a crear un nuevo componente para mostrar el código QR con los datos requeridos.

ng generate component qrcode

Esto generará 4 nuevos archivos. Además, actualizará el archivo app.module.ts al registrar el componente automáticamente. Ahora agregue el siguiente código en qrcode.component.ts :

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent{ 
  elementType = 'url';
  data = 'https://geeksforgeeks.org/';
}

Aquí elementType puede ser ‘url’, ‘img’ o ‘canvas’. El tipo de URL puede codificar datos de tipo string. La variable de datos almacena los datos que queremos codificar. Ahora agregue el siguiente código a qrcode.component.html :

<ngx-qrcode
  [elementType]="elementType"
  [value]="data">
</ngx-qrcode>

Hemos usado la etiqueta ngx-qrcode para colocar un componente. Toma los datos anteriores como entrada. Ahora agregue este componente en app.component.html :

<div>
  <app-qrcode></app-qrcode>
</div>

Podemos comprobarlo iniciando la aplicación:

ng serve -o

Abra http://localhost:4200/ en su navegador. Debería ver el siguiente resultado. Puedes validarlo escaneando el código usando cualquier aplicación.

Codificación de los datos JSON: también podemos incrustar datos JSON en el código QR. Primero necesitamos crear el objeto que queremos incrustar. Tenga en cuenta que solo podemos incrustar datos de string cuando usamos elementType ‘url’. Entonces podemos crear una string de este objeto usando JSON.stringify(). Consulte el siguiente código de qrcode.component.ts para comprenderlo mejor:

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent{ 
  elementType = 'url';
  obj = {
    cellTowers: [
      {
        cellId: 170402199,
        locationAreaCode: 35632,
        mobileCountryCode: 310,
        mobileNetworkCode: 410,
        age: 0,
        signalStrength: -60,
        timingAdvance: 15
      }
    ]
  }
  data = JSON.stringify(this.obj);
}

Producción: