loading...
Cover image for Generate QR code with Share / Download Feature ( Angular 8)

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

sandeepbalachandran profile image Sandeep Balachandran ・1 min read

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 

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

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.

Posted on by:

sandeepbalachandran profile

Sandeep Balachandran

@sandeepbalachandran

Very much interested in working with a space exploration team. Well I couldnt get anywhere with my "ET" love. interested in human body anatomy. Again not a doctor. Currently fullstack dev

Discussion

markdown guide