أفضل مكتبة لتوليد الـ QR Code

رابط المكتبة:

https://www.npmjs.com/package/angular2-qrcode

رابط المكتبة التي تعمل على Portal2 :

npm install angularx-qrcode@16.0.2

https://www.npmjs.com/package/angularx-qrcode

npm install qrious --save



To use the `qrious` library for generating QR codes in an Angular application, you can follow these steps. `qrious` is a lightweight JavaScript library for generating QR codes and is compatible with Angular.

### Step 1: Install `qrious`
First, install the `qrious` library using npm:
```sh
npm install qrious --save
```

### Step 2: Create a QR Code Service
Create a service to encapsulate the QR code generation logic using `qrious`.

#### qr-code.service.ts
```typescript
import { Injectable } from '@angular/core';
import QRious from 'qrious';

@Injectable({
  providedIn: 'root'
})
export class QRCodeService {

  constructor() { }

  generateQRCode(value: string, size: number = 256): string {
    const qr = new QRious({
      value: value,
      size: size
    });

    return qr.toDataURL();
  }
}
```

### Step 3: Use the Service in a Component
Use the service in a component to generate and display the QR code.

#### app.component.ts
```typescript
import { Component } from '@angular/core';
import { QRCodeService } from './qr-code.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  qrCodeImage: string | null = null;

  constructor(private qrCodeService: QRCodeService) {}

  generateQRCode() {
    this.qrCodeImage = this.qrCodeService.generateQRCode('https://example.com');
  }
}
```

#### app.component.html
```html
<div>
  <button (click)="generateQRCode()">Generate QR Code</button>
  <div *ngIf="qrCodeImage">
    <img [src]="qrCodeImage" alt="QR Code">
  </div>
</div>
```

### Full Example

Here is the complete example with the module and service:

#### app.module.ts
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { QRCodeService } from './qr-code.service';

@NgModule({
  declarations: [
    AppComponent,
    // other components
  ],
  imports: [
    BrowserModule,
    // other modules
  ],
  providers: [QRCodeService],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

#### qr-code.service.ts
```typescript
import { Injectable } from '@angular/core';
import QRious from 'qrious';

@Injectable({
  providedIn: 'root'
})
export class QRCodeService {

  constructor() { }

  generateQRCode(value: string, size: number = 256): string {
    const qr = new QRious({
      value: value,
      size: size
    });

    return qr.toDataURL();
  }
}
```

#### app.component.ts
```typescript
import { Component } from '@angular/core';
import { QRCodeService } from './qr-code.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  qrCodeImage: string | null = null;

  constructor(private qrCodeService: QRCodeService) {}

  generateQRCode() {
    this.qrCodeImage = this.qrCodeService.generateQRCode('https://example.com');
  }
}
```

#### app.component.html
```html
<div>
  <button (click)="generateQRCode()">Generate QR Code</button>
  <div *ngIf="qrCodeImage">
    <img [src]="qrCodeImage" alt="QR Code">
  </div>
</div>
```

### Explanation

1. **Install `qrious`**: The library is installed via npm.
2. **Service**: A `QRCodeService` is created to encapsulate the QR code generation logic.
3. **Component**: The `AppComponent` uses the service to generate and display the QR code.

By following these steps, you should be able to generate and display QR codes in your Angular application using the `qrious` library.