Podcast Title

Author Name

0:00
0:00
Album Art

Documentation for @techiediaries/ngx-qrcode

By 10xdev team August 06, 2020

@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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule
  ],
  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">
  <h1>
    @techiediaries/ngx-qrcode demo 
  </h1>
</div>

<ngx-qrcode 
  [elementType]="elementType" 
  [value] = "value"
  cssClass = "aclass"
  errorCorrectionLevel = "L">
</ngx-qrcode>

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

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

@Component({
  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
or
$ yarn test:watch ngx-qrcode

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

License

The library is available under the MIT license.

Join the 10xdev Community

Subscribe and get 8+ free PDFs that contain detailed roadmaps with recommended learning periods for each programming language or field, along with links to free resources such as books, YouTube tutorials, and courses with certificates.

Recommended For You

Up Next