Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/techiediaries/ngx-qrcode
An Angular 9/10 Component Library for Generating QR (Quick Response) Codes
https://github.com/techiediaries/ngx-qrcode
angular2 angular4 angular6 angular6-library qrcode qrcode-generator
Last synced: 6 days ago
JSON representation
An Angular 9/10 Component Library for Generating QR (Quick Response) Codes
- Host: GitHub
- URL: https://github.com/techiediaries/ngx-qrcode
- Owner: techiediaries
- License: mit
- Created: 2017-06-06T17:13:19.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:31:44.000Z (about 2 years ago)
- Last Synced: 2025-01-18T00:07:31.577Z (13 days ago)
- Topics: angular2, angular4, angular6, angular6-library, qrcode, qrcode-generator
- Language: TypeScript
- Homepage: https://techiediaries.com/ngx-qrcode/
- Size: 5.5 MB
- Stars: 192
- Watchers: 8
- Forks: 63
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# @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)
## 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
@techiediaries/ngx-qrcode demo
```
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:[email protected])
## 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;
```