QRCode Angular Component with images (not finished work in progress)

Description

This is a simple component you can include in your project which helps you with dealing the qrcode library. Further you are able to put a logo inside the qrcode and easily change settings for your needs.

Getting started

Installation

This is a basic QRCode generating component for Angular2+.

Download the component and copy the files in the module you need. Usually it's Angular_Project->src->app

Insert the import in the app.module.ts -> in the example it could be like:

import { QrCodeGeneratorComponent } from './QrCode-Angular-Component/qr-code-generator.component';

@NgModule({
declarations: [
AppComponent,
...,
QrCodeGeneratorComponent
],

Last you have to insert in angular.json in script section the qrcode library: (you can change the folder of the library ofc)

"styles": [
"src/styles.css"
],
"scripts": [
...,
"./src/app/QrCode-Angular-Component/qrcode.js"
]
},

Thats it! you are ready to go

Usage

You can use the component like every other component:

<app-qr-code-generator [qrcodeString]="virtual-love-lock.com" [qrcodeSettings]="{'fgColor': 'red'}">

Possible parameters for settings object are:

"settings": {
  "fgColor": "rgb(61, 95, 240)",
  "bgColor": "#fff",
  "size": 200,
  "margin": 20,
  "logo":"/assets/images/icons/favi.png",
  "border": 10,
  "innerCircleRadius": .4,
  "imageWidth": 2
 }

Screenshots & User guide