How To Add QR Code Generator in Anuglar Js 5 Using Ngx Qrcode

Posted By : Shilpa Adlakha | 28-Mar-2018

Angular

We begin by creating the project based an Angular 5 using the Angular CLI.

To create QR code generator code in web applications based on angular, we setup project .

we write the following command at the command prompt to create the project using angular cli.

ng new QR code-project

after running the above command creates Project named 'qrcode-project' successfully.

After the completion of the command, next step is to install the ngx-qrcode2 from the npm, it is an Angular 5 component library, which is used
to generate the QR Codes.

now we navigate to the created folder by the following command:

cd QR code-generator

now we install the QR code, by a below-given command:

npm install ngx-qrcode2 --save

Now, we open the project in our text editor i.e visual studio, now import the ngxQr code in src /app / app.module .ts.

Then import NgxQRCodeModule from ngx-qrcode2 and add it to the list of module imports.

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

import { AppComponent } from './app.component';
import { NgxQRCodeModule } from 'ngx-qrcode2';

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

After this, we will use the next-qrcode component to show the generated QR Codes.

Now we add the qr code to src/app/app.component.html :

<ngx-qrcode [qrc-element-type]="elementType" [qrc-value] = "value">
</ngx-qrcode>

Now we would add the two variables with value and the elementType to the app component with some default values.

now open src/app/app.component.ts to

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

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
elementType : 'url' | 'canvas' | 'img' = 'url';
value : string = 'Techiediaries';
}