Angular 11 Create/Generate QR Code Example

By Hardik Savani December 10, 2020 Category : Angular

Hello,

This article is focused on how to generate qr code in angular 11. you'll learn angular 11 generate qr code demo. i explained simply step by step angular 11 create qr code. In this article, we will implement a create qr code angular 11. Alright, let’s dive into the steps.

In this example we will use angularx-qrcode npm package to generate qr code in angular 11 application. we will simply install that angularx-qrcode npm package and use QRCodeModule module to create code.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install angularx-qrcode npm Package

Now in this step, we need to just install angularx-qrcode in our angular application. so let's add as like bellow:

npm install angularx-qrcode --save

Step 3: Import QRCodeModule

we will import QRCodeModule module as like bellow code:

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

Step 4: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

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 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>How to Generate QR Code in Angular? - ItSolutionStuff.com</h1>

<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...