Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mustafaer/ngx-qrcode-generator
https://github.com/mustafaer/ngx-qrcode-generator
angular code generator qr
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mustafaer/ngx-qrcode-generator
- Owner: mustafaer
- License: mit
- Created: 2023-05-09T08:35:08.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-23T11:29:41.000Z (4 months ago)
- Last Synced: 2024-10-28T02:21:05.975Z (4 months ago)
- Topics: angular, code, generator, qr
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-qrcode-generator
- Size: 435 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-qrcode-generator - An Angular component that generates QR codes using the [QRious](https://github.com/neocotic/qrious) library. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-qrcode-generator - An Angular component that generates QR codes using the <b><code> 1559⭐</code></b> <b><code> 215🍴</code></b> [QRious](https://github.com/neocotic/qrious)) library. (Table of contents / Third Party Components)
README
# NgxQrcodeGeneratorComponent
This is an Angular component that generates QR codes using the QRious library.
## Installation
To use this component, follow these steps:
1. Install the NgxQrcodeGeneratorComponent library by running the following command:
```shell
npm i ngx-qrcode-generator
```
2. Import the `NgxQrcodeGeneratorComponent` into your Angular module:
```typescript
import { NgxQrcodeGeneratorComponent } from 'ngx-qrcode-generator';
@NgModule({
declarations: [NgxQrcodeGeneratorComponent],
// ...
})
export class YourModule { }
```
3. Use the component in your Angular template:
```html
```
## Usage
The `NgxQrcodeGeneratorComponent` has the following input properties:
- `background` (string, default: `'white'`): The background color of the QR code.
- `backgroundAlpha` (number, default: `1.0`): The opacity of the background color (0.0 to 1.0).
- `foreground` (string, default: `'black'`): The foreground color of the QR code.
- `foregroundAlpha` (number, default: `1.0`): The opacity of the foreground color (0.0 to 1.0).
- `level` (string, default: `'L'`): The error correction level of the QR code (`'L'`, `'M'`, `'Q'`, `'H'`).
- `mime` (string, default: `'image/png'`): The MIME type of the generated QR code image.
- `padding` (number or null, default: `null`): The padding around the QR code image (in pixels). Use `null` for default padding.
- `size` (number, default: `100`): The size of the QR code image (width and height).
- `value` (string): The value to encode as a QR code.
- `canvas` (boolean, default: `false`): Whether to render the QR code as a canvas element (`true`) or an image element (`false`).
## Example
Here is an example of using the `NgxQrcodeGeneratorComponent`:
```html
```
In this example, a QR code is generated with the value `'https://example.com'`, size of `200` pixels, red foreground color (`'#ff0000'`), and white background color (`'#ffffff'`).
## Notes
- This component requires the QRious library to be installed.
- Make sure to import and declare the component in your Angular module.
- Customize the input properties to achieve the desired QR code appearance.
- The generated QR code can be rendered as either a canvas or an image element, depending on the `canvas` input property.