Added fillTheParentElement feature and added responsive sizes about issue #27

README.md

@@ -41,6 +41,9 @@ An optional size in pixels to render at
 
 **Default:** automatic size based on the value provided (recommended)
 
+#### fillTheParentElement: boolean (optional)
+If this value is true then `size` value will be overridden. The new `size` value will be equal to the parent element's width.
+
 #### darkColor: RGBAColor (optional)
 An RGBA Hex string to use as the color for the dark / filled modules.
 If an invalid value is passed, the default will be used.

projects/ng-qrcode-demo/src/app/app.component.html

@@ -2,41 +2,87 @@
 <div class="header">
   <qr-code value="https://www.npmjs.com/package/ng-qrcode" size="40"></qr-code>
 
-  <h1>
-    ng-qrcode demo
-  </h1>
+  <h1>ng-qrcode demo</h1>
 
   <span style="flex: 1 1 auto"></span>
 
-  <a href="https://github.com/mnahkies/ng-qrcode" rel="noreferrer" target="_blank">
-    <img alt="GitHub stars" height="20px" src="https://img.shields.io/github/stars/mnahkies/ng-qrcode.svg">
+  <a
+    href="https://github.com/mnahkies/ng-qrcode"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="GitHub stars"
+      height="20px"
+      src="https://img.shields.io/github/stars/mnahkies/ng-qrcode.svg"
+    />
   </a>
 
-  <a href="https://www.npmjs.com/package/ng-qrcode" rel="noreferrer" target="_blank">
-    <img alt="npm" height="20px" src="https://img.shields.io/npm/v/ng-qrcode.svg">
+  <a
+    href="https://www.npmjs.com/package/ng-qrcode"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <img
+      alt="npm"
+      height="20px"
+      src="https://img.shields.io/npm/v/ng-qrcode.svg"
+    />
   </a>
 </div>
 
 <div class="container">
   <div class="body">
-
     <h3>Inputs:</h3>
     <form ngForm>
       <label for="value">Value</label>
-      <input id="value" name="value" [(ngModel)]="value"/>
-
-      <label for="size">Size</label>
-      <input id="size" name="size" [(ngModel)]="size"/>
+      <input id="value" name="value" [(ngModel)]="value" />
+
+      <label for="fillparent">Fill The Parent</label>
+      <input
+        id="fillparent"
+        name="fillparent"
+        [(ngModel)]="fillParentElement"
+        type="checkbox"
+      />
+
+      <ng-container *ngIf="!fillParentElement; else fillTheParentSettings">
+        <label for="size">Size</label>
+        <input id="size" name="size" [(ngModel)]="size" />
+      </ng-container>
+
+      <ng-template #fillTheParentSettings>
+        <label for="columnsize">Column Size</label>
+        <select
+          id="columnsize"
+          name="columnsize"
+          [(ngModel)]="columnSize"
+          (change)="refresh()"
+        >
+          <option
+            value="{{ i + 1 }}"
+            *ngFor="let col of [].constructor(12); let i = index"
+          >
+            {{ i + 1 }}
+          </option>
+        </select>
+      </ng-template>
 
       <label for="darkColor">Dark Color</label>
-      <input id="darkColor" name="size" [(ngModel)]="darkColor"/>
+      <input id="darkColor" name="size" [(ngModel)]="darkColor" />
 
       <label for="lightColor">Light Color</label>
-      <input id="lightColor" name="size" [(ngModel)]="lightColor"/>
+      <input id="lightColor" name="size" [(ngModel)]="lightColor" />
 
       <label for="errorCorrectionLevel">Error Correction Level</label>
-      <select id="errorCorrectionLevel" name="errorCorrectionLevel" [(ngModel)]="errorCorrectionLevel">
-        <option *ngFor="let value of errorCorrectionLevels" [value]="value">{{value}}</option>
+      <select
+        id="errorCorrectionLevel"
+        name="errorCorrectionLevel"
+        [(ngModel)]="errorCorrectionLevel"
+      >
+        <option *ngFor="let value of errorCorrectionLevels" [value]="value">
+          {{ value }}
+        </option>
       </select>
 
       <label for="showImage">Show Image in Center?</label>
@@ -46,29 +92,55 @@ <h3>Inputs:</h3>
       </select>
 
       <label for="centerImageSize">Center Image Size</label>
-      <input id="centerImageSize" name="centerImageSize" [(ngModel)]="centerImageSize"/>
+      <input
+        id="centerImageSize"
+        name="centerImageSize"
+        [(ngModel)]="centerImageSize"
+      />
 
       <label for="margin">Margin</label>
-      <input id="margin" name="margin" [(ngModel)]="margin"/>
-
+      <input id="margin" name="margin" [(ngModel)]="margin" />
     </form>
 
     <h3>Usage:</h3>
-    <pre [innerText]="example">
-  </pre>
+    <pre [innerText]="example"></pre>
 
     <h3>Result:</h3>
-    <div class="container">
-      <qr-code [value]="value"
-               [size]="size"
-               [darkColor]="darkColor"
-               [lightColor]="lightColor"
-               [errorCorrectionLevel]="errorCorrectionLevel"
-               [centerImageSrc]="centerImageSrc"
-               [centerImageSize]="centerImageSize ? this.centerImageSize : undefined"
-               [margin]="margin">
+  </div>
+
+  <div class="row">
+    <div class="container" *ngIf="!fillParentElement; else previewFillParent">
+      <qr-code
+        [value]="value"
+        [size]="size"
+        [darkColor]="darkColor"
+        [lightColor]="lightColor"
+        [errorCorrectionLevel]="errorCorrectionLevel"
+        [centerImageSrc]="centerImageSrc"
+        [centerImageSize]="centerImageSize ? this.centerImageSize : undefined"
+        [margin]="margin"
+      >
       </qr-code>
     </div>
 
+    <ng-template #previewFillParent>
+      <div class="col-{{ columnSize }}">
+        <ng-container *ngIf="!refreshing">
+          <qr-code
+            [fillTheParentElement]="true"
+            [value]="value"
+            [darkColor]="darkColor"
+            [lightColor]="lightColor"
+            [errorCorrectionLevel]="errorCorrectionLevel"
+            [centerImageSrc]="centerImageSrc"
+            [centerImageSize]="
+              centerImageSize ? this.centerImageSize : undefined
+            "
+            [margin]="margin"
+          >
+          </qr-code>
+        </ng-container>
+      </div>
+    </ng-template>
   </div>
 </div>

projects/ng-qrcode-demo/src/app/app.component.scss

@@ -22,12 +22,15 @@
 pre {
   background-color: lightgray;
   white-space: pre-wrap;
-  word-break: keep-all
+  word-break: keep-all;
 }
 
 .container {
   display: flex;
   justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
 }
 
 .body {
@@ -40,3 +43,18 @@ form {
   grid-gap: 1rem;
   grid-template-columns: auto 1fr;
 }
+
+.row {
+  margin-left: 0;
+  margin-right: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+}
+
+@for $i from 1 through 12 {
+  .col-#{$i} {
+    flex: 0 0 #{$i * (100% / 12)};
+  }
+}

projects/ng-qrcode-demo/src/app/app.component.ts

@@ -18,20 +18,32 @@ export class AppComponent {
   darkColor?: RGBAColor
   lightColor?: RGBAColor
 
+  fillParentElement = false
+  columnSize = "3"
+  refreshing = false
+
   get centerImageSrc() {
     return this.showImage === "yes" ? "./assets/angular-logo.png" : undefined
   }
 
+  refresh() {
+    this.refreshing = true
+
+    setTimeout(() => {
+      this.refreshing = false
+    }, 500)
+  }
+
   get example() {
     return `
-<qr-code value="${ this.value }"
-         size="${ this.size }"${this.darkColor ? `
+<qr-code value="${this.value}"
+         size="${this.size}"${this.darkColor ? `
          darkColor="${this.darkColor}"` : ""}${this.lightColor ? `
          lightColor="${this.lightColor}"` : ""}
-         errorCorrectionLevel="${ this.errorCorrectionLevel }"
-         centerImageSrc="${ this.centerImageSrc }"
-         centerImageSize="${ this.centerImageSize ? parseInt(this.centerImageSize, 10) : undefined }"
-         margin="${ this.margin }">
+         errorCorrectionLevel="${this.errorCorrectionLevel}"
+         centerImageSrc="${this.centerImageSrc}"
+         centerImageSize="${this.centerImageSize ? parseInt(this.centerImageSize, 10) : undefined}"
+         margin="${this.margin}">
 </qr-code>`
   }
 

projects/ng-qrcode/src/lib/qr-code.component.ts

@@ -1,10 +1,10 @@
-import { Component, Input } from "@angular/core"
+import { Component, Input, OnDestroy, OnInit } from "@angular/core"
 import { QrCodeErrorCorrectionLevel, RGBAColor } from "./types"
 
 @Component({
   selector: "qr-code",
   template: `
-    <canvas *ngIf="value"
+    <canvas *ngIf="value && !refreshing"
             [qrCode]="value"
             [qrCodeErrorCorrectionLevel]="errorCorrectionLevel"
             [qrCodeCenterImageSrc]="centerImageSrc"
@@ -15,12 +15,13 @@ import { QrCodeErrorCorrectionLevel, RGBAColor } from "./types"
             [height]="size"
             [darkColor]="darkColor"
             [lightColor]="lightColor"
+            [fillTheParentElement]="fillTheParentElement"
     >
     </canvas>
   `,
   styles: [],
 })
-export class QrCodeComponent {
+export class QrCodeComponent implements OnInit, OnDestroy {
 
   @Input()
   value?: string
@@ -34,6 +35,9 @@ export class QrCodeComponent {
   @Input()
   lightColor?: RGBAColor
 
+  @Input()
+  fillTheParentElement?: boolean
+
   @Input()
   errorCorrectionLevel?: QrCodeErrorCorrectionLevel
 
@@ -46,4 +50,20 @@ export class QrCodeComponent {
   @Input()
   margin?: number
 
+  refreshing = false
+
+  resizeEventListener: EventListener = () => {
+    this.refreshing = true
+    setTimeout(() => {
+      this.refreshing = false
+    }, 100)
+  }
+
+  ngOnInit(): void {
+    window.addEventListener("resize", this.resizeEventListener)
+  }
+
+  ngOnDestroy(): void {
+    window.removeEventListener("resize", this.resizeEventListener)
+  }
 }

projects/ng-qrcode/src/lib/qr-code.directive.ts

@@ -24,6 +24,7 @@ export class QrCodeDirective implements OnChanges {
 
   @Input() width?: number
   @Input() height?: number
+  @Input() fillTheParentElement?: boolean
   @Input() darkColor: RGBAColor = "#000000FF"
   @Input() lightColor: RGBAColor = "#FFFFFFFF"
 
@@ -61,7 +62,6 @@ export class QrCodeDirective implements OnChanges {
     }
 
     const canvas = this.viewContainerRef.element.nativeElement as HTMLCanvasElement | null
-
     if (!canvas) {
       // native element not available on server side rendering
       return
@@ -87,6 +87,15 @@ export class QrCodeDirective implements OnChanges {
         console.error("[ng-qrcode] lightColor set to invalid value, must be RGBA hex color string, eg: #3050A130")
       }
     }
+
+    if (this.fillTheParentElement) {
+      const PARENT = canvas?.parentElement?.parentElement
+
+      if (PARENT) {
+        this.width = PARENT.clientWidth
+      }
+    }
+
     await qrcode
       .toCanvas(canvas, this.value, {
         version: this.version,