Generate QR Code In Angular 7

Here, we will learn how to generate a QR code dynamically using Angular 7 and download it. It's now a basic requirement of many applications to generate and download the QR code.

Prerequisites

• Basic knowledge of Angular 7

• Visual Studio Code

• Angular CLI must be installed

• NodeJS must be installed

Let’s get started.

Open Visual Studio Code and open a new terminal.

Type the following command to generate the new Angular 7 application.

ng new generate-qrcode --routing  

Now, open the project by opening the folder from Visual Studio Code. We have to install the QR Code package - the functionality for generating the QR code from the text.

Type the following command in the terminal.

npm install ngx-qrcode2 --save  

Now, the package will be installed in our application.

Go to the app.module.ts file add a reference there for the QR code package.

import { BrowserModule } from '@angular/platform-browser';    
import { NgModule } from '@angular/core';    
import { AppRoutingModule } from './app-routing.module';    
import { AppComponent } from './app.component';    
import { NgxQRCodeModule } from 'ngx-qrcode2';    
import { FormsModule }    from '@angular/forms';    
 
@NgModule({    
  declarations: [    
    AppComponent    
  ],    
  imports: [    
    BrowserModule,    
    AppRoutingModule,    
    NgxQRCodeModule,    
    FormsModule    
  ],    
  providers: [],    
  bootstrap: [AppComponent]    
})    
export class AppModule { }