ngx-qrcode - GitLite

KO | EN

gitlite — search

#javascript #typescript #llm #golang #go #android #machine-learning #deep-learning #linux #macos #awesome #vue #awesome-list #openai

ngx-qrcode

(★ 193)

An Angular 9/10 Component Library for Generating QR (Quick Response) Codes

File Explorer

Download Latest Version (.zip)

- CODE_OF_CONDUCT.md
- CONTRIBUTING.md
- ISSUE_TEMPLATE.md
- - karma.conf.js
  - ng-package.json
  - package.json
  - README.md
  - tsconfig.lib.json
  - tsconfig.lib.prod.json
  - tsconfig.spec.json
  - tslint.json
- - browserslist
  - karma.conf.js
  - tsconfig.app.json
  - tsconfig.spec.json
  - tslint.json
.editorconfig
.gitignore
.huskyrc.json
.npmignore
.npmrc
angular.json
CHANGELOG.md
LICENSE
package.json
README.md
tsconfig.json
tslint.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/techiediaries/ngx-qrcode

Downloads the entire project code from GitHub to your computer.

cd ngx-qrcode

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.

Type this command into your terminal and run it.

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

Downloads and installs the libraries listed in package.json.

$ yarn add @techiediaries/ngx-qrcode

Type this command into your terminal and run it.

$ npm run build

Builds optimized production files.

$ yarn build

Builds optimized production files.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @techiediaries/ngx-qrcode

```diff
! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.
```

`@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 6 or Ionic 3 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](https://en.wikipedia.org/wiki/QR_code)

> Note: Make sure to check [10xdev.space](https://10xdev.space/) for career growth, money making tips and learning paths for developers.

## How to install @techiediaries/ngx-qrcode?

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

```bash
$ npm install @techiediaries/ngx-qrcode --save
or
$ yarn add @techiediaries/ngx-qrcode
```

## How to use @techiediaries/ngx-qrcode?

For a complete and detailed tutorial on how to use this library. See:

[How to Generate QR Codes In Angular 4+ Applications ](https://www.techiediaries.com/generate-qrcodes-angular)

Import `NgxQRCodeModule` from `@techiediaries/ngx-qrcode`  into your `app.module.ts`:

```ts
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 `app.component.html`, add:
```html

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

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

```
In `app.component.ts`, add:

```ts
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';
}
```

# Contributing
Please see [Contributing Guidelines](.github/CONTRIBUTING.md).

## How to develop @techiediaries/ngx-qrcode?

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

```bash
$ npm run build
or
$ yarn build

```

To lint all `*.ts` files:

```bash
$ npm run lint
or
$ yarn lint
```

## How to run unit tests?

In development mode:

```bash
$ npm run test:watch ngx-qrcode
or
$ yarn test:watch ngx-qrcode
```
Add `--codeCoverage` option to see code coverage in `coverage` folder.

## How to publish libraries?

```bash
$ npm run lib:publish
or
$ yarn lib:publish
```

# Code of Conduct
Please see [Code of Conduct](.github/CODE_OF_CONDUCT.md).

## License
[MIT](/LICENSE) © [Techiediaries](mailto:techiediaries9@gmail.com)

## Troubleshoots

With Angular CLI 8.X.X you should add this lines to polyfills.ts

```typescript
// Needed by Buffer needed by QRCode
// tslint:disable-next-line:no-string-literal
(window as any)['global'] = window;
```