Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Cordobo/angularx-qrcode
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: 18.0.2
Choose a base ref
...
head repository: Cordobo/angularx-qrcode
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 6 commits
  • 14 files changed
  • 3 contributors

Commits on Sep 21, 2024

  1. chore(deps): bump body-parser and express

    Bumps [body-parser](https://github.com/expressjs/body-parser) and [express](https://github.com/expressjs/express). These dependencies needed to be updated together.
    
    Updates `body-parser` from 1.20.2 to 1.20.3
    - [Release notes](https://github.com/expressjs/body-parser/releases)
    - [Changelog](https://github.com/expressjs/body-parser/blob/master/HISTORY.md)
    - [Commits](expressjs/body-parser@1.20.2...1.20.3)
    
    Updates `express` from 4.19.2 to 4.21.0
    - [Release notes](https://github.com/expressjs/express/releases)
    - [Changelog](https://github.com/expressjs/express/blob/4.21.0/History.md)
    - [Commits](expressjs/express@4.19.2...4.21.0)
    
    ---
    updated-dependencies:
    - dependency-name: body-parser
      dependency-type: indirect
    - dependency-name: express
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <[email protected]>
    dependabot[bot] authored Sep 21, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    e2bd3ce View commit details

Commits on Sep 29, 2024

  1. Merge pull request #262 from Cordobo/dependabot/npm_and_yarn/multi-94…

    …23f4c335
    
    chore(deps): bump body-parser and express
    Cordobo authored Sep 29, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    7cfea43 View commit details

Commits on Oct 10, 2024

  1. chore(deps): bump cookie, socket.io and express

    Bumps [cookie](https://github.com/jshttp/cookie), [socket.io](https://github.com/socketio/socket.io) and [express](https://github.com/expressjs/express). These dependencies needed to be updated together.
    
    Updates `cookie` from 0.4.2 to 0.7.1
    - [Release notes](https://github.com/jshttp/cookie/releases)
    - [Commits](jshttp/cookie@v0.4.2...v0.7.1)
    
    Updates `socket.io` from 4.7.5 to 4.8.0
    - [Release notes](https://github.com/socketio/socket.io/releases)
    - [Changelog](https://github.com/socketio/socket.io/blob/main/CHANGELOG.md)
    - [Commits](https://github.com/socketio/socket.io/compare/[email protected]@4.8.0)
    
    Updates `express` from 4.21.0 to 4.21.1
    - [Release notes](https://github.com/expressjs/express/releases)
    - [Changelog](https://github.com/expressjs/express/blob/4.21.1/History.md)
    - [Commits](expressjs/express@4.21.0...4.21.1)
    
    ---
    updated-dependencies:
    - dependency-name: cookie
      dependency-type: indirect
    - dependency-name: socket.io
      dependency-type: indirect
    - dependency-name: express
      dependency-type: indirect
    ...
    
    Signed-off-by: dependabot[bot] <[email protected]>
    dependabot[bot] authored Oct 10, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    8a02d74 View commit details

Commits on Oct 29, 2024

  1. Merge pull request #265 from Cordobo/dependabot/npm_and_yarn/multi-2c…

    …5a3fe122
    
    chore(deps): bump cookie, socket.io and express
    Cordobo authored Oct 29, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    90fda84 View commit details

Commits on Nov 21, 2024

  1. feat: angular 19 support #266

    Andreas Jacob authored and Andreas Jacob committed Nov 21, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    6a4f799 View commit details
  2. Merge pull request #268 from Cordobo/development

    feat: angular 19 support #266
    Cordobo authored Nov 21, 2024

    Verified

    This commit was signed with the committer’s verified signature.
    IanButterworth Ian Butterworth
    Copy the full SHA
    9eab0cb View commit details
78 changes: 50 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
@@ -2,15 +2,16 @@

`angularx-qrcode` - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library

- Compatible with **Angular 18** and **Ionic**
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Compatible with **Angular 19** and **Ionic**
- Under active development
- Standalone component support
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Accessibility (a11y) attributes supported (alt, aria-label, title)
- Support for images
- Trusted and used by thousands of developers like you
- Easy to use, [sample web app](#demo-app) included

`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.
`angularx-qrcode` is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.

- [Installation](#installation)
- [Demo App](#demo-app)
@@ -22,34 +23,35 @@

## Installation

**Angular 18 and Ionic with angularx-qrcode 18**
**Angular 19 and Ionic with angularx-qrcode 19**

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

**Angular 17 and Ionic with angularx-qrcode 17**
**Angular 18 and Ionic with angularx-qrcode 18**

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

**Angular 16 and Ionic with angularx-qrcode 16**
**Angular 17 and Ionic with angularx-qrcode 17**

```
npm install angularx-qrcode@16.0.2 --save
npm install angularx-qrcode@17.0.1 --save
# Or with yarn
yarn add angularx-qrcode@16.0.2
yarn add angularx-qrcode@17.0.1
```

**All supported angular versions**

| Angular Version | angularx-qrcode Version |
| --------------- | ----------------------- |
| ^19 | ^19.0.0 |
| ^18 | ^18.0.2 |
| ^17 | ^17.0.1 |
| ^16 | ^16.0.2 |
@@ -80,26 +82,46 @@ and open the url `http://localhost:4200/` in your browser

# Usage and Example Implementations

The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is in the folder [`projects/demo-app`](projects/demo-app/src/app) in this repository.
The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is located in the directory [`projects/demo-app`](projects/demo-app/src/app) of this repository.

### Import the module and add it to your imports section in your main AppModule:
### Upgrade angularx-qrcode from angularx-qrcode 18 and earlier

```
// File: app.module.ts
// all your other imports...
Since Angular 19, the latest version of the angularx-qrcode module is now exported as a standalone component. If you’re upgrading from a version before Angular 19, please replace the import statement with the component’s name since it’s now a standalone component.


````
# OLD - angular 18 and older
# File: app.module.ts
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
# NEW - angular 19 and newer
// File: app.component.ts
import { QRCodeComponent } from 'angularx-qrcode';
````
For more uses with angular 18 and earlier see: [angularx/qrcode as ngModule](https://github.com/Cordobo/angularx-qrcode/tree/18.0.0)


### Import the component and add it to your imports section in your main AppComponent:


```
// For angular 19, see above for angular 18 and older
// File: app.component.ts
// other imports...
import { QRCodeComponent } from 'angularx-qrcode';
@Component({
selector: "app-root",
imports: [
// other component imports...
QRCodeComponent,
],
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppModule { }
export class AppComponent {
// your code
}
```

```
@@ -109,10 +131,10 @@ export class AppModule { }
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
```

### Generate a QR Code from a string (directive only)
### Generate a QR Code from a string

Now that angular/Ionic know about the new QR Code module,
let's invoke it from our template with a directive.
Now that angular/Ionic know about the new QR Code component,
let's invoke it from our template.
If we use a simple text-string, we need no additional
code in our controller.

15 changes: 8 additions & 7 deletions angular.json
Original file line number Diff line number Diff line change
@@ -55,13 +55,15 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"allowedCommonJsDependencies": ["qrcode"],
"outputPath": "dist/demo-app",
"outputPath": {
"base": "dist/demo-app",
"browser": ""
},
"index": "projects/demo-app/src/index.html",
"main": "projects/demo-app/src/main.ts",
"polyfills": "projects/demo-app/src/polyfills.ts",
"polyfills": ["projects/demo-app/src/polyfills.ts"],
"tsConfig": "projects/demo-app/tsconfig.app.json",
"assets": [
"projects/demo-app/src/favicon.ico",
@@ -71,7 +73,8 @@
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"projects/demo-app/src/styles.css"
],
"scripts": []
"scripts": [],
"browser": "projects/demo-app/src/main.ts"
},
"configurations": {
"production": {
@@ -96,9 +99,7 @@
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
Loading