¿Cómo generar Códigos QR con Angular 10?

El Código QR (Código de Respuesta Rápida) se ha convertido en el componente esencial para todos y cada uno de los productos, organizaciones, aplicaciones, etc. En las campañas de marketing, podemos usar el código QR generado para

• Descargar aplicaciones
• Enviar correo electrónico
• Ver la ubicación de la empresa, etc.

En este artículo, veamos cómo generar códigos QR con Angular 10.

Prerrequisitos: En su máquina de desarrollo local se debe haber instalado Node 10+, junto con NPM 6+.

• El Node se puede instalar desde https://nodejs.org/en/download/
• Una vez instalado podemos verificar lo mismo usando

node --version

• npm se puede instalar desde https://www.npmjs.com/get-npm
• Una vez instalado podemos verificar lo mismo usando

npm  --version

Paso 1: Instalación de Angular CLI 10

Desde la línea de comandos, proporcione el siguiente comando para instalar

 npm install -g @angular/cli

Según la versión actual, se instalará, y lo mejor es que la versión sea 10+

Paso 2: Vamos a crear una nueva aplicación Angular

Podemos usar el editor de Visual Studio Code o incluso desde la línea de comandos, podemos crear un proyecto de muestra que genere un código QR

ng new <projectname>

Aquí tengamos «angular10qrcodegeneration» como nombre del proyecto

Se instalarán los paquetes necesarios. 

Ahora la estructura del proyecto de «angular10qrcodegeneration» será

Navegue al directorio del proyecto donde está presente package.json

Archivo importante que especifica las dependencias del proyecto.

Paso 3: Para generar QRCode, necesitamos la dependencia requerida. Se puede instalar usando

 npm install @techiediaries/ngx-qrcode

Una vez instalado, en el archivo src->app->qrcodeapp.module.ts , podemos usar

import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode'; 

Y en

@NgModule({
imports: [ NgxQRCodeModule ] Can be given

Necesitamos importar adicionalmente FormsModule. Entonces, nuestro   fragmento src->app-> app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
  
// This import is required to have QRCode generation
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { QRCodeAppRoutingModule } from './qrcodeapp-routing.module';
import { QRCodeAppComponent } from './qrcodeapp.component';
  
@NgModule({
  declarations: [
    QRCodeAppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeAppRoutingModule,
    NgxQRCodeModule,  // This import is required for QRCode
    FormsModule
  ],
  providers: [],
  bootstrap: [QRCodeAppComponent]
})
export class QRCodeAppModule { }

Ahora la biblioteca se ha importado y podemos usar el componente «ngx-qrcode» en la aplicación Angular.

import { Component } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } 
        from '@techiediaries/ngx-qrcode';
@Component({
  selector: 'app-root',
  templateUrl: './qrcodeapp.component.html',
  styleUrls: ['./qrcodeapp.component.css']
})
  
export class AppComponent {
  title = 'angular10qrcodegeneration';
  
  // We can have Canvas/Img/Url as elementType
  elementType = NgxQrcodeElementTypes.URL;
  
  // We can have High/Low/Medium/Quartile
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  
  // Need to specify the valid website address
  value = 'https://www.geeksforgeeks.com/';
}

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="qrcodeshadow"></ngx-qrcode>
<!-- value that you want to encode -->
<textarea [(ngModel)] = "value"></textarea>

/* You can add global styles to this file, 
and also import other style files */
.qrcodeshadow {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(15px 15px 15px #e42424);
    opacity: .5;
}
    
textarea {
    margin-top: 15px; 
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 400px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    font-weight: bold;
    color: green;
    opacity: .5;
}

Pasos para construir el proyecto.

ng build (at the location where your package.json present)

Pasos para ejecutar el proyecto:

ng serve  (at the location where your package.json present)

Como el código se ejecuta en el puerto 4200, al presionar http://localhost:4200/, podemos ver el resultado como

Podemos especificar cualquier URL de sitio web válida y podemos generar códigos QR con éxito en Angular 10. En CSS, podemos embellecer la visualización de la sombra.

Veamos la salida para el sitio web de Google.

Conclusión: muchas bibliotecas importantes, como los generadores de QRCode, están disponibles en npm Angular. Podemos usarlos de manera efectiva de acuerdo a nuestras necesidades. QRCode es un componente esencial para cualquier aplicación/aplicación móvil, etc.