Angular 17 Generate QR Code

To generate QR code in angular; Simply install angularx-qrcode and use its option such as [qrdata]="your_string" on the template to generate QR codes in angular applications.

The angularx-qrcode is a lightweight module for angular applications, it will help us to make different types of QR codes with less code.

Generate QR Code in Angular 17

Steps to create or generate QR code in angular 17 projects with example:

Step 1 – Set Up a New Angular Project

Open your cmd or terminal window and run ng new my-new-app --no-standalone to install and create a new Angular project:

ng new my-new-app --no-standalone

Step 2 – Install Angular-qrcode Module

To install angularx-qrcode in angular application, simply run the npm install angularx-qrcode --save command on cmd:

npm install angularx-qrcode --save

Step 3 – Import the QR Code Module

Open the app.module.ts file from src/app folder and import QRCodeModule in it like following:

import { NgModule } from '@angular/core';
import { BrowserModule, provideClientHydration } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QRCodeModule
  ],
  providers: [
    provideClientHydration()
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Create a QR Code in the Template

Open the app.component.html file and use the following code to display the generated QR code in it:

<div style="text-align:center">
  <h1>
    Welcome to QR Code Generator in Angular 17 Applications!
  </h1>
<qrcode [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

</div>

Step 5 – Create a QR Code from a variable

Open app.component.ts file from the src/app folder, and replace its content with the following:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-new-app';

   public myAngularxQrCode: string = 'hello';
  constructor () {
    // assign a value
    this.myAngularxQrCode = 'Your QR code data string';
  }
}

Step 6: Test the QR Code Generator Component

Then, start the development server by running the below given command in the cmd:

ng serve

Open your browser and navigate to http://localhost:4200/, and you should see your Angular app with the QR code displayed on the page.

Conclusion

That’s it! You have successfully generate a QR code in your Angular application using the angularx-qrcode module.

Recommended Angular Tutorials