DOCSEARCHbyAlgolia
Submit Docs

angularx-qrcode

repository·main·Indexed 19 days ago

https://github.com/cordobo/angularx-qrcode

A fast, easy-to-use QR Code generator library for Angular (v4-22) and Ionic (v3-8) using node-qrcode. It supports standalone components, Ivy, AOT, SSR, and accessibility features. The library provides the QRCodeComponent for rendering QR codes as canvas, svg, or img/url elements, with customizable colors, error correction levels, and the ability to add center images.

Tokens
3.2K
Snippets
13
Records
16
Agent score
67%

What's inside angularx-qrcode

  1. Mitigate GitHub Actions cache poisoning

    main

    To prevent cache poisoning in CI/CD pipelines, follow these security guidelines:

    Workflow Permissions and Scopes

    • Untrusted PR workflows must not receive secrets, publish permissions, or OIDC rights.
    • Do not use pull_request_target to checkout and execute untrusted PR code.
    • Set GITHUB_TOKEN permissions minimally per workflow or job.

    Cache Management Best Practices

    • Release, publish, and deploy workflows should not restore caches.
    • If caches are used, keep them in unprivileged CI jobs.
    • Avoid broad restore-keys.
    • Do not cache executable or build-relevant artifacts such as node_modules, dist, build, .angular/cache, or .nx/cache in sensitive workflows.

    Dependency and Action Security

    • Pin third-party GitHub Actions to full commit SHAs where possible.
    • Prefer npm installs with npm ci --ignore-scripts.
    • Do not run npm install on production servers that have access to secrets.

    Note for this repository: Existing workflow cache usage is intentionally not removed automatically. Review any cache used in release, publish, or deploy workflows before relying on it for sensitive jobs.

  3. Use QRCodeComponent in Angular (v19+)

    main

    To use the QR code generator in an Angular 19+ application, import QRCodeComponent into your standalone component and use the <qrcode> selector in your template.

    Component Setup:

    import { QRCodeComponent } from 'angularx-qrcode';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [QRCodeComponent],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  public myData: string = 'Your QR code data string';
}

    Template Usage:

    <qrcode [qrdata]='myData' [width]='256' [errorCorrectionLevel]='M'></qrcode>
    // File: app.component.ts
import { QRCodeComponent } from 'angularx-qrcode';

@Component({
  selector: "app-root",
  imports: [
    QRCodeComponent,
  ],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  // your code
}

  4. Security best practices for npm supply-chain hardening

    main

    When managing dependencies and build environments, follow these operational security guidelines:

    • Production Servers: Do not run npm install on production servers that have access to secrets.
    • Build Environments: Builds should not receive production secrets in their environment.
    • GitHub Actions:
      • Do not use pull_request_target in conjunction with checking out and executing untrusted pull request code.
      • Pin third-party GitHub Actions to specific commit SHAs where possible.
    • Release Workflows: Ensure release workflows are manually protected or guarded by Environment Approval.

    This project utilizes the following npm settings to reduce exposure to install-time payloads and very new package versions:

    • ignore-scripts=true: Disables dependency lifecycle scripts.
    • save-exact=true: Records exact dependency versions.
    • min-release-age=7: Avoids package versions published less than seven days ago (requires npm 11.12.1 or newer).

  5. Upgrade from angularx-qrcode 18 or earlier

    main

    Starting with Angular 19, angularx-qrcode is exported as a standalone component rather than an NgModule.

    If you are upgrading from version 18 or older, you must change your import statement from QRCodeModule to QRCodeComponent and add it directly to your component's imports array instead of an NgModule's imports array.

    # OLD - angular 18 and older
import { QRCodeModule } from 'angularx-qrcode';

# NEW - angular 19 and newer
import { QRCodeComponent } from 'angularx-qrcode';

  7. Install angularx-qrcode

    main

    Install the library using your preferred package manager. Choose the version that matches your Angular/Ionic version.

    For Angular 22 and Ionic:

    npm install angularx-qrcode
# or
yarn add angularx-qrcode
# or
pnpm add angularx-qrcode

    For older versions:

    • Angular 21: npm install angularx-qrcode@21.0.5 --save
    • Angular 20: npm install angularx-qrcode@20.0.0 --save
    • Angular 19: npm install angularx-qrcode@19.0.0 --save
    • Angular 18: npm install angularx-qrcode@18.0.2 --save
    # npm
npm install angularx-qrcode
# yarn
yarn add angularx-qrcode
# pnpm
pnpm add angularx-qrcode

  8. Get the QR Code URL for downloading

    main

    You can retrieve a sanitized URL of the generated QR code using the (qrCodeURL) output event. This allows users to download the QR code as an image.

    The file format returned depends on the elementType:

    • canvas, url, or img: returns a .png file.
    • svg: returns a .svg file.

    Implementation Example:

    import { Component } from '@angular/core';
import { QRCodeComponent } from 'angularx-qrcode';
import { SafeUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [QRCodeComponent],
  templateUrl: './example.html'
})
export class ExampleComponent {
  public myAngularxQrCode: string = 'Your QR code data string';
  public qrCodeDownloadLink: SafeUrl = '';

  onChangeURL(url: SafeUrl) {
    this.qrCodeDownloadLink = url;
  }
}

    Template:

    <qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]='myAngularxQrCode' [width]='256' [errorCorrectionLevel]='M'></qrcode>

<a [href]='qrCodeDownloadLink' download='qrcode'>Download</a>
    // 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
<qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]='myAngularxQrCode' [width]='256' [errorCorrectionLevel]='M'></qrcode>
<a [href]='qrCodeDownloadLink' download='qrcode'>Download</a>

  10. Configure QR Code options with QRCodeConfigType

    main

    The QRCodeConfigType interface defines the configuration object used to customize the appearance and behavior of the generated QR code.

    Key properties include:

    • color: An object containing dark and light color strings (e.g., hex codes or RGBA).
    • errorCorrectionLevel: Determines the level of error correction to apply.
    • margin: The size of the quiet zone (white border) around the QR code.
    • scale: The scaling factor for the QR code.
    • width: The width of the QR code in pixels.
    • version (optional): The specific QR code version to use (0-40).
    const config: QRCodeConfigType = {
  color: {
    dark: '#000000',
    light: '#ffffff'
  },
  errorCorrectionLevel: 'M',
  margin: 2,
  scale: 2,
  width: 256
};

  11. Use the QRCodeComponent to render QR codes

    main

    The QRCodeComponent (selector: qrcode) is the primary way to display QR codes in your Angular application. It supports rendering to canvas, svg, or img/url elements and allows for customization of colors, error correction, and even adding a center image (logo).

    <qrcode
  [qrdata="https://example.com"
  [elementType="'canvas'"
  [colorDark="'#000000'"
  [colorLight="'#ffffffff'"
  [width="150"
  [margin="2"
  [errorCorrectionLevel="'H'"
  [imageSrc="'assets/logo.png'"
  [imageHeight="40"
  [imageWidth="40">
</qrcode>

  12. Listen to the qrCodeURL output event

    main

    The qrCodeURL output emits a SafeUrl whenever the QR code is generated or updated. This URL is a Blob URL (e.g., blob:http://...) representing the rendered image (PNG for canvas, SVG for SVG, or the source for images). This is useful if you need to download the QR code or use it in another part of your application.

    <qrcode
  [qrdata="'my-data'"
  (qrCodeURL)="onQrCodeUrlGenerated($event)">
</qrcode>
    // In your component class
onQrCodeUrlGenerated(url: SafeUrl) {
  console.log('Generated QR Code URL:', url);
}