Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cordobo/angularx-qrcode
A fast and easy-to-use Angular QR Code Generator library with Ivy support
https://github.com/cordobo/angularx-qrcode
angular angular10 angular11 angular12 angular13 angular14 angular15 angular16 angular17 angular18 angular9 angularx-qrcode aot-compilation aot-support ionic ivy qrcode qrcodejs ssr
Last synced: about 1 month ago
JSON representation
A fast and easy-to-use Angular QR Code Generator library with Ivy support
- Host: GitHub
- URL: https://github.com/cordobo/angularx-qrcode
- Owner: Cordobo
- License: mit
- Created: 2017-09-24T14:58:31.000Z (almost 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T23:37:24.000Z (about 2 months ago)
- Last Synced: 2024-07-27T00:26:55.449Z (about 1 month ago)
- Topics: angular, angular10, angular11, angular12, angular13, angular14, angular15, angular16, angular17, angular18, angular9, angularx-qrcode, aot-compilation, aot-support, ionic, ivy, qrcode, qrcodejs, ssr
- Language: TypeScript
- Homepage: https://cordobo.github.io/angularx-qrcode/
- Size: 5.99 MB
- Stars: 459
- Watchers: 20
- Forks: 127
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - angularx-qrcode - A fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library. (Table of contents / Third Party Components)
README
# angularx-qrcode - Angular QR Code Generator
`angularx-qrcode` - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library
- [Features](#features)
- [Installation](#installation)
- [Demo App](#demo-app)
- [Usage & Example Implementations](#usage-and-example-implementations)
- [Available Parameters](#available-parameters)
- [Contribute](#contribute)
- [Sponsoring](#sponsoring)
- [License](#license)
## Features
- Compatible with **Angular** and Ionic
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Under active development
- Accessibility (a11y) attributes supported (alt, aria-label, title)
- Support for images
- Trusted and used by thousands of developers like you
`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.
## Installation
**Angular 18 and Ionic with angularx-qrcode 18**
```
npm install angularx-qrcode --save
# Or with yarn
yarn add angularx-qrcode
```
**Angular 17 and Ionic with angularx-qrcode 17**
```
npm install [email protected] --save
# Or with yarn
yarn add [email protected]
```
**Angular 16 and Ionic with angularx-qrcode 16**
```
npm install [email protected] --save
# Or with yarn
yarn add [email protected]
```
**Older supported angular versions**
```
# angular 15 and Ionic
npm install [email protected] --save
# angular 14 and Ionic
npm install [email protected] --save
# angular 13 and Ionic
npm install [email protected] --save
# angular 12 and Ionic
npm install [email protected] --save
# angular 11 and Ionic
npm install [email protected] --save
# angular 10 and Ionic
npm install [email protected] --save
# angular 9 and Ionic
npm install angularx-qrcode@~2.3.7 --save
# angular 8 and Ionic
npm install angularx-qrcode@~2.1.4 --save
# angular 5/6/7
npm install [email protected] --save
# Angular 4
npm install [email protected] --save
```
# Demo App
**[Working online demo of Angular QR Code Generator](https://cordobo.github.io/angularx-qrcode/)**
The source for the demo angular app is available in [`projects/demo-app`](projects/demo-app). Run the command
```
npm start
```
and open the url `http://localhost:4200/` in your browser
# Usage and Example Implementations
The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is in the folder [`projects/demo-app`](projects/demo-app/src/app) in this repository.
### Import the module and add it to your imports section in your main AppModule:
```
// File: app.module.ts
// all your other imports...
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
```
// File: app.component.html
// all your HTML...
```
### Generate a QR Code from a string (directive only)
Now that angular/Ionic know about the new QR Code module,
let's invoke it from our template with a directive.
If we use a simple text-string, we need no additional
code in our controller.
```
```
### Create a QR Code from a variable in your controller
In addition to our ``-directive in `app.component.html`,
lets add two lines of code to our controller `app.component.ts`.
```
// File: app.component.ts
export class QRCodeComponent {
public myAngularxQrCode: string = null;
constructor () {
// assign a value
this.myAngularxQrCode = 'Your QR code data string';
}
}
// File: app.component.html
```
### Download a QR Code
The [online demo](https://cordobo.github.io/angularx-qrcode/) contains a [`working sample`](projects/demo-app) how to download the QR Code with a button.
### Getting the QR Code URL
To download the QR Code, we have to use the `qrCodeURL` attribute
of the `` which returns a sanitized URL representing the
location of the QR Code.
```
// File: example.ts
export class QRCodeComponent {
public myAngularxQrCode: string = "";
public qrCodeDownloadLink: SafeUrl = "";
constructor () {
this.myAngularxQrCode = 'Your QR code data string';
}
onChangeURL(url: SafeUrl) {
this.qrCodeDownloadLink = url;
}
}
// File: example.html
Download
```
The file format obtained by `qrCodeURL` depends directly on the
elementType of ``. If it's either canvas, url or image,
it returns an image as `.png`, if it's svg, returns a `.svg` file.
## Available Parameters
| Attribute | Type | Default | Description |
| -------------------- | ----------------------- | ----------- | -------------------------------------------------------------- |
| allowEmptyString | Boolean | false | Allow qrdata to be an empty string |
| alt | String | null | HTML alt attribute (supported by img, url) |
| ariaLabel | String | null | HTML aria-label attribute (supported by canvas, img, url) |
| colorDark | String | '#000000ff' | RGBA color, color of dark module (foreground) |
| colorLight | String | '#ffffffff' | RGBA color, color of light module (background) |
| cssClass | String | 'qrcode' | CSS Class |
| elementType | String | 'canvas' | 'canvas', 'svg', 'img', 'url' (alias for 'img') |
| errorCorrectionLevel | String | 'M' | QR Correction level ('L', 'M', 'Q', 'H') |
| imageSrc | String | null | Link to your image |
| imageHeight | Number | null | height of your image |
| imageWidth | Number | null | width of your image |
| margin | Number | 4 | Define how much wide the quiet zone should be. |
| qrCodeURL | EventEmitter\ | | Returns the QR Code URL |
| qrdata | String | '' | String to encode |
| scale | Number | 4 | Scale factor. A value of 1 means 1px per modules (black dots). |
| title | String | null | HTML title attribute (supported by canvas, img, url) |
| version | Number | (auto) | 1-40 |
| width | Number | 10 | Height/Width (any value) |
## QR Code capacity
Depending on the amount of data of the **qrdata** to encode, a minimum **width** is required.
## AOT - Ahead Of Time Compilation
`angularx-qrcode` supports AOT Compilation (Ahead-of-Time Compilation) which results in significant faster rendering. An AOT-enabled module is included. Further reading: https://angular.io/guide/aot-compiler
## SSR - Server Side Rendering
As of version 1.6.0, SSR support is fully implemented, the following workaround is no longer needed. [HowTo use Angular QRCode with SSR](https://github.com/Cordobo/angularx-qrcode/issues/5)
## Contribute
- Please open your PR against the development branch.
- Make sure your editor uses **prettier** to minimize commited code changes.
- You cannot contribute but want to support development? Consider a [sponsorship](https://github.com/sponsors/Cordobo).
## Sponsoring
Support the development of angularx-qrcode (or even see your logo here?), consider [sponsoring angularx-qrcode](https://github.com/sponsors/Cordobo). Your support is much appreciated!
## License
MIT License
Copyright (c) 2018 - present [Andreas Jacob (Cordobo.com)](http://cordobo.com/)