How To Generate QR Code In Angular 13

    In this article, we will see how to generate QR code in angular 13. In this example, we will use the angularx-qrcode npm package to generate QR code in the angular 13 application. we will simply install that angularx-qrcode npm package and use the QRCodeModule module to generate the QR code.

    So, let's see how to generate QR code in angular 13, angular 13 QR code generator example, how to create QR code in angular 12/13, angular QR code generator, angular QR code generator, angularx-qrcode example.

Step 1: Create New App

    In this step, we will create a new angular application using the below command.

ng new qr-code
Read Also: How To Create Dynamic XML Sitemap In Laravel 9
Step 2: Install angularx-qrcode npm Package

    In this step, we will install the angularx-qrcode package

npm install angularx-qrcode --save
Step 3: Import QRCodeModule

    Now, we will import the QRCodeModule module.

    src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Read Also: Two Way Data Binding In Angular 12
Step 4: Update ts File

    In this step, we will update the app.component.ts file.

    src/app/app.component.ts

import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public QrCode: string = null;

  constructor() {
    this.QrCode = 'websolutionstuff.com';
  }
}
Step 5: Update HTML File

    Now, we will update the app.component.html file.

    src/app/app.component.html

<h2 style="text-align:center;margin-top:40px">How To Generate QR Code In Angular 13 - Websolutionstuff</h2>

<qrcode
  [qrdata]="'stringQrCode'"
  [width]="300"
  [errorCorrectionLevel]="'M'"
  style="text-align:center"
></qrcode>
Read Also: Angular 13 Crop Image Before Upload With Preview
Step 6: Run The Server

    In last, we need to run the server using the below command.

ng serve

    Now, Go to your web browser, type the given URL and view the app output.

http://localhost:4200

    Output:

    how_to_generate_qr_code_in_angular_13_output 

    You might also like :

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan