We are learning How to generate QR code in angular 11. QR code generator app in easy process. we learn random QR code generator see below.
This tutorial will use angularx-qrcode npm package to generate QR code in the angular 11 application. And import the QRCodeModule module code. see below step-by-step random QR code generator angular 11.
Create/Generate QR Codes In Angular 10/11
Step 1 – Create New Angular App
First, of all let's start by creating an Angular 11 project using the Angular CLI.
Open your terminal or command prompt, and generate a new angular project by running the following command: Go
ng new my-new-app
Step 2 – Install angularx-qrcode npm Package
In this step, you need to install angularx-qrcode in our angular application. So, the following command:
npm install angularx-qrcode --save
Step 3 – Add Code on Module.ts File
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode'; //<------------ import this code ------------
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
QRCodeModule //<------------ import this code ------------
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step 4 – Add Code on View File
<h1>Create/Generate QR Codes In Angular 10/11 - phpcodingstuff.com</h1>
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
Step 5 – Add Code On 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 () {
// assign a value
this.myAngularxQrCode = 'Your QR code data string';
}
}
Step 6 – Start Angular App
ng serve
Original source: https://www.phpcodingstuff.com/blog/how-to-create-generate-qr-codes-in-angular.html
Top comments (0)