Documentation for @techiediaries/ngx-qrcode

  • Author: Techiediaries Team

@techiediaries/ngx-qrcode An Angular Component library for Generating QR (Quick Response) Codes.

You can use the @techiediaries/ngx-qrcode to easily generate QR codes inside your Angular 9/10 or Ionic 5 applications

QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data; extensions may also be used. Source

How to install @techiediaries/ngx-qrcode?

To use ngx-qrcode in your project, install it via npm or yarn:

$ npm install @techiediaries/ngx-qrcode --save

Via yarn:

$ yarn add @techiediaries/ngx-qrcode

How to use @techiediaries/ngx-qrcode?

Import NgxQRCodeModule from @techiediaries/ngx-qrcode into your src/app/app.module.ts file as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';

import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Once the library has been imported, you can use the ngx-qrcode component in your Angular application.

In the src/app/app.component.html file add the following code:

<div style="text-align:center">
    @techiediaries/ngx-qrcode demo 

  [value] = "value"
  cssClass = "aclass"
  errorCorrectionLevel = "L">

Next, in the src/app/app.component.ts file add:

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app';
  elementType = 'url';
  value = 'Techiediaries';

How to develop @techiediaries/ngx-qrcode?

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build
$ yarn build

To lint all *.ts files:

$ npm run lint
$ yarn lint

How to run unit tests?

In development mode:

$ npm run test:watch ngx-qrcode
$ yarn test:watch ngx-qrcode

Add --codeCoverage option to see code coverage in coverage folder.


The library is available under the MIT license.

Angular Cookbook
What's new with Angular 12
An Angular 11 Roadmap - The Past, Present, and Future of Angular
Angular 11 Developer Roadmap
Vue 3 Playground