Angular 11 generate QR code example. In this tutorial, you’ll learn how to generate qr code in angular 11 app.

This tutorial will use angularx-qrcode npm package to generate qr code in angular 11 application. And import QRCodeModule module to create code. Also explained simply step by step angular 11 create qr code.

How to Generate QR Codes in Angular 10/11?

• Step 1 – Create New Angular App
• Step 2 – Install angularx-qrcode npm Package
• Step 3 – Add Code on Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On Component ts File
• Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Then execute the following command on terminal to install angular material:

ng add @angular/material

Step 2 – Install angularx-qrcode npm Package

In this step, you need to install angularx-qrcode in our angular application. So, open your terminal and execute the following command:

npm install angularx-qrcode --save

Step 3 – Add Code on Module.ts File

In this step, visit src/app directory and open app.module.ts file. Then add the following code into it:

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 { }

Step 4 – Add Code on View File

In this step, create html and for display qr code in angular 11 ap. So, visit src/app/app.component.html and update the following code into it:

<h1>How to Generate QR Code in Angular 11? - Tutsmake.com</h1>
    
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Step 5 – Add Code On Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myAngularxQrCode: string = null;
   
  constructor () {
    this.myAngularxQrCode = 'ItSoluionStuff.com';
  }
}

Step 6 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve