DEV Community

Cover image for Generate QR code with Share / Download Feature ( Angular 8)
Sandeep Balachandran
Sandeep Balachandran

Posted on

Generate QR code with Share / Download Feature ( Angular 8)

Hey there,

Alt text of image

Recently I had to generate QR code in my web application for a client. So I thought to share it here.

Library Used

Angular Material
ngx-qrcode2

npm install ngx-qrcode2 --save 
Enter fullscreen mode Exit fullscreen mode

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 { }    
Enter fullscreen mode Exit fullscreen mode

Open the app.component.html file and add the code in it.

details

Open the app.component.ts file and add the code in it.

details

Pass the string to "value" element to generate the QR code.

Thats it for now.

Discussion (0)