la generation et telechargement du qrcode pret (#3)

Co-authored-by: styve Lioumba <styve.lioumba@jdc.fr>

src/app/routes/profile/profile-detail/profile-detail.component.html

@@ -17,6 +17,9 @@
             <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
             <p class="text-base">Raclette knausgaard hella meggs normcore williamsburg enamel pin sartorial venmo tbh hot chicken gentrify portland.</p>
           </div>
+          <a [href]="qrCodeDownloadLink" download="qrcode" class="w-full flex items-center justify-center sm:pr-8 sm:py-8">
+            <qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myAngularxQrCode" [width]="128" [errorCorrectionLevel]="'M'" class="mx-auto"></qrcode>
+          </a>
         </div>
         <div class="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
           <p class="leading-relaxed text-lg mb-4">Meggings portland fingerstache lyft, post-ironic fixie man bun banh mi umami everyday carry hexagon locavore direct trade art party. Locavore small batch listicle gastropub farm-to-table lumbersexual salvia messenger bag. Coloring book flannel truffaut craft beer drinking vinegar sartorial, disrupt fashion axe normcore meh butcher. Portland 90's scenester vexillologist forage post-ironic asymmetrical, chartreuse disrupt butcher paleo intelligentsia pabst before they sold out four loko. 3 wolf moon brooklyn.</p>

src/app/routes/profile/profile-detail/profile-detail.component.ts

@@ -1,19 +1,31 @@
 import {Component, inject} from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
+import {QRCodeModule} from "angularx-qrcode";
+import {SafeUrl} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-profile-detail',
   standalone: true,
-  imports: [],
+  imports: [
+    QRCodeModule
+  ],
   templateUrl: './profile-detail.component.html',
   styleUrl: './profile-detail.component.scss'
 })
 export class ProfileDetailComponent {
 
   private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
   protected profile = this.route.snapshot.data['profile'];
 
+  protected myAngularxQrCode: string = "http://loalhost:4200";
+  protected qrCodeDownloadLink: SafeUrl = "";
+
   constructor() {
     console.log(this.profile)
+    this.myAngularxQrCode = this.myAngularxQrCode + this.router.url;
+  }
+  onChangeURL(url: SafeUrl) {
+    this.qrCodeDownloadLink = url;
   }
 }