### Install angularx-qrcode Library

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/START-HERE.txt

Use npm to install the angularx-qrcode library. This command is typically found in installation guides.

```bash
npm install angularx-qrcode
```

--------------------------------

### Install angularx-qrcode

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/demo-app/src/app/app.html

Install the library using npm or yarn. This command adds the package to your project dependencies.

```bash
npm install angularx-qrcode --save
```

```bash
yarn add angularx-qrcode
```

--------------------------------

### Install and Import angularx-qrcode

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Instructions for installing the library and importing the QRCodeComponent into your Angular module.

```bash
npm install angularx-qrcode --save
```

```typescript
import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
  imports: [
    QRCodeModule
  ]
})
export class YourAppModule { }
```

--------------------------------

### Run Demo App

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Start the local development server for the demo application by running 'npm start'. The app will be available at http://localhost:4200/.

```console
npm start
```

--------------------------------

### QRCodeVersion Usage Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Shows how to use the `version` input to set a fixed QR code version or rely on automatic version detection. Includes a validation function example.

```html
// Auto-detect version (recommended)
<qrcode [qrdata]="data"></qrcode>
```

```html
// Fixed version
<qrcode [version]="10" [qrdata]="data"></qrcode>
```

```typescript
// Validate version in code
function isValidVersion(v: number): v is QRCodeVersion {
  return v >= 1 && v <= 40 && Number.isInteger(v)
}
```

--------------------------------

### Minimal QR Code Example

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

A basic example of how to render a QR code with a given data string and width.

```html
<qrcode [qrdata]="'https://example.com'" [width]="256"></qrcode>
```

--------------------------------

### QRCodeConfigType Example Usage

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/types.md

An example demonstrating how to instantiate the QRCodeConfigType interface with specific values for QR code generation.

```typescript
const config: QRCodeConfigType = {
  color: {
    dark: '#000000ff',
    light: '#ffffffff'
  },
  errorCorrectionLevel: 'M',
  margin: 4,
  scale: 4,
  version: undefined,
  width: 256
}
```

--------------------------------

### Install angularx-qrcode with npm

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Install the latest version of angularx-qrcode compatible with Angular 21 and Ionic.

```console
# npm
npm install angularx-qrcode
# yarn
yarn add angularx-qrcode
# pnpm
pnpm add angularx-qrcode
```

--------------------------------

### Input Validation Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates how to handle empty strings and version clamping for QR code data.

```APIDOC
## Input Validation

### Empty String Handling

```typescript
// Throw error if qrdata is empty (default)
<qrcode [qrdata]="''" [allowEmptyString]="false"></qrcode>

// Allow empty string
<qrcode [qrdata]="''" [allowEmptyString]="true"></qrcode>
```

### Version Clamping

```typescript
// Valid range: 1-40
// Out of range values are auto-corrected with warning
<qrcode [version]="50"></qrcode>  <-- Auto-clamped to 40 -->
<qrcode [version]="0"></qrcode>   <-- Auto-clamped to 1 -->
```
```

--------------------------------

### Basic QR Code Example

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/START-HERE.txt

A minimal example demonstrating how to render a QR code with a given data string. Ensure QRCodeComponent is imported into your Angular module.

```typescript
import { QRCodeComponent } from 'angularx-qrcode'

@Component({
  imports: [QRCodeComponent],
  template: `<qrcode [qrdata]="'https://example.com'"></qrcode>`
})
export class MyComponent {}
```

--------------------------------

### Install angularx-qrcode (npm)

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Install the latest version of angularx-qrcode using npm. This is compatible with Angular 21 and Ionic.

```console
npm install angularx-qrcode
```

--------------------------------

### Install angularx-qrcode (pnpm)

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Install the latest version of angularx-qrcode using pnpm. This is compatible with Angular 21 and Ionic.

```console
pnpm add angularx-qrcode
```

--------------------------------

### Install angularx-qrcode (yarn)

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Install the latest version of angularx-qrcode using yarn. This is compatible with Angular 21 and Ionic.

```console
yarn add angularx-qrcode
```

--------------------------------

### Example Usage of QRCodeErrorCorrectionLevel

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/types.md

Example of setting the errorCorrectionLevel input for the qrcode component. The default is 'M' or 'medium'.

```html
<qrcode [errorCorrectionLevel]="'H'" [qrdata]="'Data'"></qrcode>
```

--------------------------------

### Install angularx-qrcode v20 for Angular 20

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Install a specific version of angularx-qrcode (v20.0.0) for compatibility with Angular 20.

```console
npm install angularx-qrcode@20.0.0 --save
# Or with yarn
yarn add angularx-qrcode@20.0.0
```

--------------------------------

### QRCodeConfigType Construction Example

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Illustrates how the QRCodeConfigType object is constructed internally by QRCodeComponent from various inputs. This configuration is then passed to the underlying qrcode library.

```typescript
// This is built internally by QRCodeComponent from its inputs:
const config: QRCodeConfigType = {
  color: {
    dark: '#000000ff',      // from @Input colorDark
    light: '#ffffffff'      // from @Input colorLight
  },
  errorCorrectionLevel: 'M',  // from @Input errorCorrectionLevel
  margin: 4,                  // from @Input margin
  scale: 4,                   // from @Input scale
  version: undefined,         // from @Input version
  width: 256                  // from @Input width
}
```

--------------------------------

### Install Dependencies Securely with npm CI

Source: https://github.com/cordobo/angularx-qrcode/blob/main/docs/security/npm-supply-chain-hardening.md

Use this command in CI and Docker build contexts to ensure a clean and secure installation of dependencies, disabling lifecycle scripts.

```sh
npm ci --ignore-scripts
```

--------------------------------

### Install angularx-qrcode v18 for Angular 18

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Install a specific version of angularx-qrcode (v18.0.2) for compatibility with Angular 18.

```console
npm install angularx-qrcode@18.0.2 --save
# Or with yarn
yarn add angularx-qrcode@18.0.2
```

--------------------------------

### Download QR Code

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Explains how to obtain a downloadable QR code by using the `qrCodeURL` event emitter to get the QR code's data URL.

```APIDOC
## Download a QR Code

This example demonstrates how to get a downloadable QR code using the `qrCodeURL` event.

### Controller (`example.ts`)

```typescript
import { SafeUrl } from '@angular/platform-browser';

export class QRCodeComponent {
  public myAngularxQrCode: string = "";
  public qrCodeDownloadLink: SafeUrl = "";

  constructor () {
    this.myAngularxQrCode = 'Your QR code data string';
  }

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

### Template (`example.html`)

```html
<qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
<a [href]="qrCodeDownloadLink" download="qrcode">Download</a>
```

### Event

- **qrCodeURL** (EventEmitter<SafeUrl>) - Emits a sanitized URL representing the QR code, suitable for downloading. The file format (.png or .svg) depends on the `elementType`.
```

--------------------------------

### RGBAColor Common Values and Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Provides examples of common RGBA color values, including opaque, semi-transparent, and fully transparent colors, and demonstrates their use in QR code components.

```typescript
// Opaque colors
const black: RGBAColor = '#000000ff'
const white: RGBAColor = '#ffffffff'
const red: RGBAColor = '#ff0000ff'
const blue: RGBAColor = '#0000ffff'
const green: RGBAColor = '#00ff00ff'

// Semi-transparent colors
const transparentWhite: RGBAColor = '#ffffff80'  // 50% opacity
const darkSemitransparent: RGBAColor = '#00000060'  // ~37% opacity

// Fully transparent
const transparent: RGBAColor = '#00000000'
```

```html
// Custom branded colors
<qrcode
  [colorDark]="'#1a472aff'"
  [colorLight]="'#f0f8f4ff'"
  [qrdata]="data">
</qrcode>
```

```html
// Semi-transparent background
<qrcode
  [colorDark]="'#000000ff'"
  [colorLight]="'#ffffff80'"
  [qrdata]="data">
</qrcode>
```

--------------------------------

### Example Usage of QRCodeElementType

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/types.md

Example of setting the elementType input for the qrcode component to render as an SVG. SVG output is vector-based and scales without quality loss.

```html
<qrcode [elementType]="'svg'" [qrdata]="'Data'"></qrcode>
```

--------------------------------

### Install angularx-qrcode v19 for Angular 19

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Install a specific version of angularx-qrcode (v19.0.0) for compatibility with Angular 19.

```console
npm install angularx-qrcode@19.0.0 --save
# Or with yarn
yarn add angularx-qrcode@19.0.0
```

--------------------------------

### Basic QR Code Generation in Angular

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/START-HERE.txt

Demonstrates the minimal setup for generating a QR code in an Angular component. Import QRCodeComponent and use it in the template with basic data and width properties.

```typescript
import { QRCodeComponent } from 'angularx-qrcode'
  
  @Component({
    imports: [QRCodeComponent],
    template: `<qrcode [qrdata]="'data'" [width]="256"></qrcode>`
  })
  export class MyComponent {}
```

--------------------------------

### Handling Empty Strings in QRCode Data

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Illustrates a common mistake of not handling empty strings for `qrdata`, which can lead to errors. The example shows the problematic usage.

```html
<qrcode [qrdata]="maybeEmpty"></qrcode>
<!-- Throws error if empty -->
```

--------------------------------

### Use QRCodeVersion in Template

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/types.md

Example of setting the QR code version using the `version` input property in the QRCodeComponent. The version determines the size of the QR code matrix.

```html
<qrcode [version]="5" [qrdata]="'Data'"></qrcode>
```

--------------------------------

### Using QRCodeComponent in a Component

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Example of how to import and use the QRCodeComponent within an Angular component's template and class.

```typescript
@Component({
  imports: [QRCodeComponent],
  template: "<qrcode [qrdata]="data"></qrcode>"
})
export class MyComponent {
  data = 'https://example.com'
}
```

--------------------------------

### Complex QR Code Configuration with All Features

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/configuration.md

A comprehensive example showcasing most available configuration options, including dynamic data binding, custom dimensions, error correction, colors, element type, CSS class, logo overlay, accessibility attributes, and event emission for the generated URL. This configuration is suitable for highly customized QR code requirements.

```html
<qrcode
  [qrdata]="userData.url"
  [width]="500"
  [scale]="4"
  [version]="10"
  [errorCorrectionLevel]="'H'"
  [margin]="2"
  [colorDark]="'#003366ff'"
  [colorLight]="'#ffffffff'"
  [elementType]="'canvas'"
  [cssClass]="'branded-qr'"
  [imageSrc]="'./brand-mark.png'"
  [imageWidth]="80"
  [imageHeight]="80"
  [ariaLabel]="'QR code for ' + userData.name"
  [title]="'Scan this code to access user profile'"
  (qrCodeURL)="onQRGenerated($event)">
</qrcode>
```

--------------------------------

### RGBAColor Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/types.md

Illustrates various valid RGBA hex color strings for use with QR code color inputs. Ensure the format is `#RRGGBBAA` where AA controls opacity.

```html
colorDark="#000000ff"  // Opaque black
colorLight="#ffffffff" // Opaque white
colorDark="#ff0000ff"  // Opaque red
colorLight="#ffffff00" // Transparent white
```

--------------------------------

### Testing QR Code Component

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Includes examples for unit and end-to-end testing of the QRCodeComponent, ensuring its functionality and reliability.

```typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { QRCodeComponent } from 'angularx-qrcode';

describe('QRCodeComponent', () => {
  let component: QRCodeComponent;
  let fixture: ComponentFixture<QRCodeComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ QRCodeComponent ]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(QRCodeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
```

--------------------------------

### Accessibility Guide for QR Codes

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Provides guidance on ensuring QR codes generated by the component are accessible, covering aspects like sufficient contrast and alternative text.

```html
<qrcode [qrData]="'Accessible QR Code'" aria-label="QR Code for important link"></qrcode>
```

--------------------------------

### Error Handling in QR Code Generation

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Provides examples of how to handle potential errors during QR code generation, such as empty data or version validation issues.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<qrcode [qrData]="data" (qrError)="handleError($event)"></qrcode>',
})
export class AppComponent {
  data: string = '';

  handleError(error: any) {
    console.error('QR Code Error:', error);
  }
}
```

--------------------------------

### QRCodeElementType Usage Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Illustrates setting the QR code element type for different rendering scenarios, including canvas with overlays, scalable SVG, and basic image elements.

```html
// Canvas with overlay image capability
<qrcode [elementType]="'canvas'" [imageSrc]="'./logo.png'" [qrdata]="data"></qrcode>
```

```html
// SVG for scalable output
<qrcode [elementType]="'svg'" [qrdata]="data" [width]="500"></qrcode>
```

```html
// Image element
<qrcode [elementType]="'img'" [qrdata]="data"></qrcode>
```

```typescript
// Type guard function
function isCanvasType(type: QRCodeElementType): boolean {
  return type === 'canvas'
}
```

--------------------------------

### QRCodeErrorCorrectionLevel Usage Examples

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Demonstrates how to set the error correction level using the `errorCorrectionLevel` input in a qrcode component or a TypeScript variable.

```html
// Canvas component with high error correction
<qrcode [errorCorrectionLevel]="'H'" [qrdata]="'Data'"></qrcode>
```

```typescript
// TypeScript: store error level in variable
const level: QRCodeErrorCorrectionLevel = 'Q'
```

```html
// Dynamically set based on conditions
const correctionLevel = isOutdoorUse ? 'H' : 'M'
<qrcode [errorCorrectionLevel]="correctionLevel" [qrdata]="data"></qrcode>
```

--------------------------------

### Printable QR Code in Angular

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/usage-guide.md

Create QR codes that are optimized for printing. This example includes styles to hide the print button when the page is printed.

```typescript
import { Component } from '@angular/core'
import { QRCodeComponent } from 'angularx-qrcode'

@Component({
  selector: 'app-printable-qr',
  imports: [QRCodeComponent],
  template: `
    <div class="printable-qr">
      <h2>Product QR Code</h2>
      <qrcode 
        [qrdata]="'https://product.example.com/123'" 
        [width]="400"
        [scale]="8">
      </qrcode>
      <button onclick="window.print()">Print</button>
    </div>
  `,
  styles: [`
    @media print {
      button { display: none; }
      .printable-qr { margin: 0; padding: 0; }
    }
  `]
})
export class PrintableQRComponent {}
```

--------------------------------

### Component-Level Error Handling for QR Generation

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/errors.md

Implement a try-catch block in your component to gracefully handle potential QR code generation failures. This example shows pre-validation of data before attempting generation.

```typescript
// Wrap in try-catch at component level
export class MyComponent {
  async generateQR() {
    try {
      // QRCodeComponent handles generation internally
      // But you can pre-validate data
      if (!this.isValidData(this.qrData)) {
        console.warn('Invalid data for QR code')
        this.qrData = 'https://default-url.com'
      }
    } catch (error) {
      console.error('QR generation failed:', error)
    }
  }
}
```

--------------------------------

### Component for QR Code Data Validation

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/errors.md

Example component demonstrating how to validate QR code data before it's updated. It ensures the data is valid, defaulting to a provided URL if not.

```typescript
export class MyComponent implements OnChanges {
  qrData = 'Initial data'

  ngOnChanges() {
    // Validate before changes propagate
    if (!this.isValidQRData(this.qrData)) {
      this.qrData = 'https://default.com'
    }
  }

  private isValidQRData(data: string): boolean {
    return data && data.trim().length > 0 && data !== 'null'
  }
}
```

--------------------------------

### Style QR Code Container and Element with CSS

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/configuration.md

Example CSS rules to style the container div (using the applied `cssClass`) and the QR code element (canvas or img) within it. This enables customization of padding, borders, alignment, and responsiveness.

```css
/* Style the container */
.your-css-class {
  padding: 20px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
}

/* Style the canvas/img element inside */
.your-css-class canvas,
.your-css-class img {
  max-width: 100%;
  height: auto;
}
```

--------------------------------

### QR Code with All Input Options

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates the usage of the qrcode component with all available input properties for customization.

```html
<qrcode
  [qrdata]="'data'"                           <!-- Required -->
  [width]="300"                               <!-- Default: 10 -->
  [scale]="4"                                 <!-- Default: 4 -->
  [elementType]="'canvas'"                    <!-- Default: 'canvas' -->
  [errorCorrectionLevel]="'M'"                <!-- Default: 'M' -->
  [margin]="4"                                <!-- Default: 4 -->
  [version]="undefined"                       <!-- Default: auto -->
  [colorDark]="'#000000ff'"                   <!-- Default: black -->
  [colorLight]="'#ffffffff'"                  <!-- Default: white -->
  [cssClass]="'qrcode'"                       <!-- Default: 'qrcode' -->
  [imageSrc]="'./logo.png'"                   <!-- Optional, canvas only -->
  [imageWidth]="80"                           <!-- Default: 40 -->
  [imageHeight]="80"                          <!-- Default: 40 -->
  [alt]="'QR code'"                           <!-- Optional, img only -->
  [ariaLabel]="'QR code description'"         <!-- Optional -->
  [title]="'Scan me'"                         <!-- Optional -->
  [allowEmptyString]="false"                  <!-- Default: false -->
  (qrCodeURL)="onQRGenerated($event)">
</qrcode>
```

--------------------------------

### Downloading a QR Code

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Explains how to obtain a downloadable URL for the generated QR code using the `qrCodeURL` event emitter.

```APIDOC
## Getting the QR Code URL for Download

This example demonstrates how to use the `qrCodeURL` event to get a sanitized URL of the QR code, enabling download functionality.

### Component (`example.ts`)

```typescript
import { SafeUrl } from '@angular/platform-browser';

export class QRCodeComponent {
  public myAngularxQrCode: string = "";
  public qrCodeDownloadLink: SafeUrl = "";

  constructor () {
    this.myAngularxQrCode = 'Your QR code data string';
  }

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

### Template (`example.html`)

```html
<qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
<a [href]="qrCodeDownloadLink" download="qrcode">Download</a>
```

### Event

- **qrCodeURL** (EventEmitter<SafeUrl>) - Emits a sanitized URL representing the QR code image. The file format (.png or .svg) depends on the `elementType`.

### Parameters

- **qrdata** (String) - The string to encode.
- **width** (Number) - The desired width of the QR code.
- **errorCorrectionLevel** (String) - The error correction level ('L', 'M', 'Q', 'H').
- **elementType** (String) - The element type for rendering ('canvas', 'svg', 'img', 'url'). Affects the output format of `qrCodeURL`.
```

--------------------------------

### Basic QR Code Generation

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Demonstrates how to generate a QR code by directly providing a string to the `qrdata` attribute.

```APIDOC
## Generate a QR Code from a string

This example shows how to use the `<qrcode>` component with a static string.

### Component Usage

```html
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

### Parameters

- **qrdata** (String) - The string to encode into the QR code.
- **width** (Number) - The desired width of the QR code.
- **errorCorrectionLevel** (String) - The error correction level ('L', 'M', 'Q', 'H').
```

--------------------------------

### QR Code Configuration Options

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Illustrates how to configure various properties of the QRCodeComponent, such as size, error correction level, and margin.

```html
<qrcode
  [qrData]="'Data for QR Code'"
  [width]="256"
  [errorCorrectionLevel]="'M'"
  [margin]="10"
></qrcode>
```

--------------------------------

### Generate QR Code from a String

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Demonstrates how to generate a QR code by directly providing a string to the `qrdata` attribute. This is the simplest way to use the component.

```APIDOC
## Generate a QR Code from a string

This example shows how to use the `<qrcode>` component with a static string.

### Component Usage

```html
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

### Parameters

- **qrdata** (String) - The data string to encode into the QR code.
- **width** (Number) - The desired width of the QR code in pixels.
- **errorCorrectionLevel** (String) - The error correction level ('L', 'M', 'Q', 'H'). Defaults to 'M'.
```

--------------------------------

### Basic QR Code Generation

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Demonstrates the fundamental usage of the QRCodeComponent to generate a QR code from a given data string.

```html
<qrcode [qrData]="'Your QR Code Data'"></qrcode>
```

--------------------------------

### Properly Handling Empty Strings in QRCode Data

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates the correct way to handle potentially empty strings for `qrdata` by providing a default value or setting `allowEmptyString` to `false`.

```html
<qrcode [qrdata]="maybeEmpty || 'default'" [allowEmptyString]="false"></qrcode>
```

--------------------------------

### Import QRCodeComponent

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Import only the QRCodeComponent for basic usage.

```typescript
import { QRCodeComponent } from 'angularx-qrcode'
```

--------------------------------

### Create Downloadable QR Code

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/index.md

Generate a QR code and provide a button to download it. Use a template reference variable (`#qr`) to access the QR code instance and call a download method.

```html
<qrcode #qr [qrdata]="'https://example.com'"></qrcode>
<button (click)="downloadQR()">Download</button>
```

--------------------------------

### Methods

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Lists the available methods for the QR code component.

```APIDOC
### Methods

```typescript
// Convert base64 data URL to Blob
convertBase64ImageUrlToBlob(url: string): Blob

// Emit QR code as URL (called internally)
emitQRCodeURL(element: Element): void

// Check if data is valid (protected)
isValidQrCodeText(data: string | null): boolean
```
```

--------------------------------

### Dynamic QR Code Data Binding

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Bind the QR code data to a component property that can be updated dynamically, for example, from an input field.

```typescript
export class MyComponent {
  url = 'https://example.com'
}
```

```html
<input [(ngModel)]="url">
<qrcode [qrdata]="url"></qrcode>
```

--------------------------------

### Capture QR Code as URL

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Listen for the 'qrCodeURL' event to get the generated QR code as a SafeUrl, which can then be used for download links or other purposes.

```typescript
export class MyComponent {
  qrCodeUrl: SafeUrl | null = null

  onQRGenerated(url: SafeUrl) {
    this.qrCodeUrl = url
  }
}
```

```html
<qrcode [qrdata]="'data'" (qrCodeURL)="onQRGenerated($event)"></qrcode>
<a [href]="qrCodeUrl" download="qr">Download</a>
```

--------------------------------

### Reference Template Element with ViewChild

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/implementation-details.md

Use ViewChild to get a direct reference to a template element. Set `static: true` for the reference to be available in `ngOnInit`.

```typescript
@ViewChild('qrcElement', { static: true }) 
public qrcElement!: ElementRef
```

--------------------------------

### Performance Optimization Strategies

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Details performance optimization techniques for the QRCodeComponent, focusing on efficient rendering and memory management.

```html
<qrcode [qrData]="largeData" [renderAs]="'svg'"></qrcode>
```

--------------------------------

### Display Static QR Code

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/index.md

Use this pattern to display a QR code with a fixed data source. Ensure the `qrdata` and `width` properties are correctly set.

```html
<qrcode [qrdata]="'https://example.com'" [width]="300"></qrcode>
```

--------------------------------

### Available Parameters for QR Code Component

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Lists and describes all available attributes (parameters) for the `<qrcode>` component.

```APIDOC
## 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<SafeUrl> |  | 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) |
```

--------------------------------

### Dynamic QR Code Configuration from TypeScript

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/configuration.md

Demonstrates how to dynamically configure QR code properties using a TypeScript component. This allows for flexible and data-driven QR code generation within an Angular application.

```typescript
import { Component } from '@angular/core'

@Component({
  selector: 'app-qr-config',
  template: `
    <qrcode
      [qrdata]="config.qrdata"
      [width]="config.width"
      [errorCorrectionLevel]="config.errorCorrectionLevel"
      [colorDark]="config.colorDark"
      [elementType]="config.elementType">
    </qrcode>
  `
})
export class QRConfigComponent {
  config = {
    qrdata: 'https://github.com/Cordobo/angularx-qrcode',
    width: 256,
    errorCorrectionLevel: 'M' as const,
    colorDark: '#000000ff',
    elementType: 'canvas' as const
  }
}
```

--------------------------------

### Basic QR Code Usage in Angular

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/index.md

Demonstrates how to import and use the QRCodeComponent in an Angular application. Ensure QRCodeComponent is imported into the module or standalone component.

```typescript
import { Component } from '@angular/core'
import { QRCodeComponent } from 'angularx-qrcode'

@Component({
  selector: 'app-root',
  imports: [QRCodeComponent],
  template:
    `<qrcode [qrdata]="'https://example.com'" [width]="256"></qrcode>`
})
export class AppComponent {}
```

--------------------------------

### Download QR Code using qrCodeURL

Source: https://github.com/cordobo/angularx-qrcode/blob/main/README.md

Utilize the qrCodeURL event emitter to get a downloadable URL for the QR code. This URL can be used in an anchor tag with the download attribute. The file format depends on the elementType.

```typescript
// 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>
```

--------------------------------

### QR Code Generation from Controller Variable

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Illustrates how to dynamically generate a QR code using a variable defined in the component's controller.

```APIDOC
## Create a QR Code from a variable in your controller

This example shows how to bind a controller variable to the `qrdata` attribute for dynamic QR code generation.

### Controller (`app.component.ts`)

```typescript
export class QRCodeComponent {
  public myAngularxQrCode: string = null;
  constructor () {
    this.myAngularxQrCode = 'Your QR code data string';
  }
}
```

### Template (`app.component.html`)

```html
<qrcode [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

### Parameters

- **qrdata** (String) - The string to encode, bound to a controller variable.
- **width** (Number) - The desired width of the QR code.
- **errorCorrectionLevel** (String) - The error correction level ('L', 'M', 'Q', 'H').
```

--------------------------------

### Displaying Multiple QR Codes in a Grid

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/usage-guide.md

Render multiple QR codes efficiently within a grid layout. This example uses Angular's `ngFor` directive to iterate over an array of items, generating a QR code for each.

```typescript
import { Component } from '@angular/core'
import { QRCodeComponent } from 'angularx-qrcode'
import { CommonModule } from '@angular/common'

@Component({
  selector: 'app-qr-grid',
  imports: [QRCodeComponent, CommonModule],
  template: `
    <div class="qr-grid">
      @for (item of items; track item.id) {
        <div class="qr-item">
          <h3>{{ item.name }}</h3>
          <qrcode [qrdata]="item.url" [width]="200"></qrcode>
        </div>
      }
    </div>
  `,
  styles: [`
    .qr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
    }
    .qr-item {
      text-align: center;
    }
  `]
})
export class QRGridComponent {
  items = [
    { id: 1, name: 'Product A', url: 'https://shop.com/a' },
    { id: 2, name: 'Product B', url: 'https://shop.com/b' },
    { id: 3, name: 'Product C', url: 'https://shop.com/c' }
  ]
}
```

--------------------------------

### QRCodeComponent API

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

This section details the complete API for the QRCodeComponent, including all input properties, output events, and public methods. It serves as a comprehensive guide for integrating and using the QR code generation component in Angular applications.

```APIDOC
## QRCodeComponent API

### Description
Provides a comprehensive API for generating QR codes within an Angular application. It exposes numerous input properties for customization, an output event for tracking URL changes, and public methods for programmatic control.

### Input Properties
- **data** (string) - Required - The data to be encoded in the QR code.
- **version** (number | '1' | '2' | ... | '40') - Optional - The QR code version (1-40).
- **errorCorrectionLevel** ('L' | 'M' | 'Q' | 'H') - Optional - The error correction level.
- **elementType** ('canvas' | 'svg' | 'url') - Optional - The rendering element type.
- **scale** (number) - Optional - The scale factor for the QR code.
- **width** (number) - Optional - The desired width of the QR code.
- **margin** (number) - Optional - The margin around the QR code.
- **colorDark** (string) - Optional - The color of the dark modules (e.g., '#000000').
- **colorLight** (string) - Optional - The color of the light modules (e.g., '#ffffff').
- **cssClass** (string) - Optional - CSS class to apply to the QR code element.
- **imageSrc** (string) - Optional - URL of an image to overlay on the QR code.
- **imageWidth** (number) - Optional - Width of the overlay image.
- **imageHeight** (number) - Optional - Height of the overlay image.
- **alt** (string) - Optional - Alt text for accessibility.
- **ariaLabel** (string) - Optional - ARIA label for accessibility.
- **title** (string) - Optional - Title attribute for accessibility.
- **allowEmptyString** (boolean) - Optional - Allows empty string as valid data.
- **qrdata** (string) - Alias for 'data'.
- **includeMargin** (boolean) - Optional - Whether to include the margin.
- **includeImage** (boolean) - Optional - Whether to include the overlay image.

### Output Events
- **qrCodeURL** (EventEmitter<string>) - Emits the generated QR code URL when it changes.

### Public Methods
- **clear()**: Clears the QR code and resets the component.
- **getGraphicElement()**: Returns the rendered graphic element (canvas or SVG).

### Usage Examples
- Basic QR code generation.
- QR code with custom styling.
- QR code with an image overlay.
- QR code with different error correction levels.
- QR code with specific version and scale.

### Protected Methods
- (Not detailed in source)

### Private Methods
- (4 methods documented internally)

### Lifecycle Methods
- **ngOnChanges()**: Handles input property changes.

### Protected Methods
- (Not detailed in source)

### Private Methods
- (4 methods documented internally)

### Lifecycle Methods
- **ngOnChanges()**: Handles input property changes.

```

--------------------------------

### Get QR Code URL for Download

Source: https://github.com/cordobo/angularx-qrcode/blob/main/projects/angularx-qrcode/README.md

Utilize the `qrCodeURL` event emitter to obtain a sanitized URL of the generated QR code. This URL can be used to download the QR code as a PNG or SVG file, depending on the `elementType`.

```typescript
// 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;
  }
}
```

```html
// File: example.html
<qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
<a [href]="qrCodeDownloadLink" download="qrcode">Download</a>
```

--------------------------------

### Handling QRCode Output Events

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Shows how to listen for the `qrCodeURL` output event, which emits a `SafeUrl` when the QR code is generated or updated.

```typescript
(qrCodeURL)="handleURL($event)"
```

```typescript
// Type
EventEmitter<SafeUrl>
```

--------------------------------

### createQRCode() Method Orchestration Flow

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/implementation-details.md

Outlines the comprehensive flow of the createQRCode() method, from parameter validation and data handling to QR code generation and DOM rendering.

```plaintext
createQRCode()
  ├─ 1. Validate version parameter
  │   ├─ If > 40: clamp to 40, warn
  │   ├─ If < 1: clamp to 1, warn
  │   └─ If NaN: set to undefined, warn
  │
  ├─ 2. Validate qrdata
  │   └─ Call isValidQrCodeText(this.qrdata)
  │       └─ If invalid: throw error
  │
  ├─ 3. Handle empty allowed strings
  │   └─ If qrdata === '' and allowEmptyString: convert to ' '
  │
  ├─ 4. Build QRCodeConfigType object
  │   └─ Create config from all input properties
  │
  ├─ 5. Route to appropriate element type
  │   ├─ 'canvas' path
  │   ├─ 'svg' path
  │   ├─ 'img'/'url' path (default)
  │
  ├─ 6. Generate QR code via qrcode library
  │   └─ Call toCanvas/toSVG/toDataURL
  │
  ├─ 7. Apply accessibility attributes
  │   └─ Set ariaLabel, title, alt if provided
  │
  ├─ 8. Add image overlay (canvas only)
  │   ├─ Load image from imageSrc
  │   └─ Draw on canvas center
  │
  ├─ 9. Render element to DOM
  │   └─ Call renderElement()
  │
  └─ 10. Emit qrCodeURL event
      └─ Call emitQRCodeURL()
```

--------------------------------

### Applying CSS Classes to QRCode Component

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates how to apply a custom CSS class to the QRCode component's container for styling purposes.

```typescript
<qrcode [cssClass]="'my-qr'" [qrdata]="data"></qrcode>
```

--------------------------------

### Download QR Code as PNG

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Generate a downloadable PNG image of the QR code by accessing the canvas element and converting it to a data URL.

```typescript
export class MyComponent {
  @ViewChild('myQR') qrComponent!: QRCodeComponent

  downloadQR() {
    const element = this.qrComponent.qrcElement.nativeElement
    const canvas = element.querySelector('canvas')
    const link = document.createElement('a')
    link.href = canvas.toDataURL('image/png')
    link.download = 'qrcode.png'
    link.click()
  }
}
```

```html
<qrcode #myQR [qrdata]="'data'"></qrcode>
<button (click)="downloadQR()">Download</button>
```

--------------------------------

### Standalone Component Import for Modern Versions

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Demonstrates the correct way to import the QRCode component for Angular version 19 and above, utilizing standalone components.

```typescript
// NEW (Angular 19+)
import { QRCodeComponent } from 'angularx-qrcode'
```

--------------------------------

### Import All Types from angularx-qrcode

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/exported-types.md

Imports all available types from the 'angularx-qrcode' library. This is useful when you need access to multiple type definitions.

```typescript
import {
  QRCodeErrorCorrectionLevel,
  QRCodeElementType,
  QRCodeVersion,
  RGBAColor,
  QRCodeConfigType
} from 'angularx-qrcode'
```

--------------------------------

### Rendering Paths: Canvas vs. SVG

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Explains the different rendering paths available for QR codes, including Canvas and SVG, and their respective use cases.

```html
<qrcode [qrData]="'Canvas Example'" [elementType]="'canvas'"></qrcode>
```

```html
<qrcode [qrData]="'SVG Example'" [elementType]="'svg'"></qrcode>
```

--------------------------------

### Generate Static QR Code

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/usage-guide.md

Create a QR code that displays a fixed URL or string. This is useful for product links or contact information that does not change.

```typescript
@Component({
  selector: 'app-static-qr',
  imports: [QRCodeComponent],
  template: '
    <qrcode 
      [qrdata]="'https://example.com/product/123'" 
      [width]="250">
    </qrcode>
  '
})
export class StaticQRComponent {}
```

--------------------------------

### Download QR Code as PNG

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/api-reference/qrcode-component.md

Converts the generated QR code from a canvas element to a data URL, then to a Blob, enabling download as a PNG file. Requires a ViewChild reference to the QRCodeComponent.

```typescript
import { QRCodeComponent } from 'angularx-qrcode'

export class MyComponent {
  @ViewChild(QRCodeComponent) qrComponent!: QRCodeComponent

  downloadQRCode() {
    const canvas = this.qrComponent.qrcElement.nativeElement.querySelector('canvas')
    const dataUrl = canvas.toDataURL('image/png')
    const blob = this.qrComponent.convertBase64ImageUrlToBlob(dataUrl)
    
    const link = document.createElement('a')
    link.href = URL.createObjectURL(blob)
    link.download = 'qrcode.png'
    link.click()
  }
}
```

--------------------------------

### Promise Wrapping Methods

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/MANIFEST.txt

Demonstrates the three methods for wrapping asynchronous operations with Promises within the library.

```typescript
async function exampleAsync() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Operation Complete');
    }, 1000);
  });
}
```

--------------------------------

### QR Code with Logo Overlay

Source: https://github.com/cordobo/angularx-qrcode/blob/main/_autodocs/QUICK-REFERENCE.md

Overlay a logo image onto the QR code. Ensure the logo does not obscure too much of the QR code to maintain scannability.

```html
<qrcode
  [qrdata]="'https://company.com'"
  [elementType]="'canvas'"
  [imageSrc]="'./logo.png'"
  [imageWidth]="80"
  [imageHeight]="80">
</qrcode>
```

--------------------------------

### Run Read-Only IOC Check

Source: https://github.com/cordobo/angularx-qrcode/blob/main/docs/security/npm-supply-chain-hardening.md

Execute this command to perform a read-only check for Indicators of Compromise (IOC) within your project's dependencies.

```sh
npm run security:ioc
```