You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Trusted and used by thousands of developers like you
11
12
- Easy to use, [sample web app](#demo-app) included
12
13
13
-
`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.
14
+
`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.
14
15
15
16
-[Installation](#installation)
16
17
-[Demo App](#demo-app)
@@ -22,34 +23,35 @@
22
23
23
24
## Installation
24
25
25
-
**Angular 18 and Ionic with angularx-qrcode 18**
26
+
**Angular 19 and Ionic with angularx-qrcode 19**
26
27
27
28
```
28
29
npm install angularx-qrcode --save
29
30
# Or with yarn
30
31
yarn add angularx-qrcode
31
32
```
32
33
33
-
**Angular 17 and Ionic with angularx-qrcode 17**
34
+
**Angular 18 and Ionic with angularx-qrcode 18**
34
35
35
36
```
36
-
npm install angularx-qrcode@17.0.1 --save
37
+
npm install angularx-qrcode@18.0.2 --save
37
38
# Or with yarn
38
-
yarn add angularx-qrcode@17.0.1
39
+
yarn add angularx-qrcode@18.0.2
39
40
```
40
41
41
-
**Angular 16 and Ionic with angularx-qrcode 16**
42
+
**Angular 17 and Ionic with angularx-qrcode 17**
42
43
43
44
```
44
-
npm install angularx-qrcode@16.0.2 --save
45
+
npm install angularx-qrcode@17.0.1 --save
45
46
# Or with yarn
46
-
yarn add angularx-qrcode@16.0.2
47
+
yarn add angularx-qrcode@17.0.1
47
48
```
48
49
49
50
**All supported angular versions**
50
51
51
52
| Angular Version | angularx-qrcode Version |
52
53
| --------------- | ----------------------- |
54
+
| ^19 | ^19.0.0 |
53
55
| ^18 | ^18.0.2 |
54
56
| ^17 | ^17.0.1 |
55
57
| ^16 | ^16.0.2 |
@@ -80,26 +82,46 @@ and open the url `http://localhost:4200/` in your browser
80
82
81
83
# Usage and Example Implementations
82
84
83
-
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.
85
+
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.
84
86
85
-
### Import the module and add it to your imports section in your main AppModule:
87
+
### Upgrade angularx-qrcode from angularx-qrcode 18 and earlier
86
88
87
-
```
88
-
// File: app.module.ts
89
-
// all your other imports...
89
+
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.
90
+
91
+
92
+
````
93
+
# OLD - angular 18 and older
94
+
# File: app.module.ts
90
95
import { QRCodeModule } from 'angularx-qrcode';
91
96
92
-
@NgModule({
93
-
declarations: [
94
-
AppComponent
95
-
],
96
-
imports: [
97
-
QRCodeModule
98
-
],
99
-
providers: [],
100
-
bootstrap: [AppComponent]
97
+
# NEW - angular 19 and newer
98
+
// File: app.component.ts
99
+
import { QRCodeComponent } from 'angularx-qrcode';
100
+
````
101
+
For more uses with angular 18 and earlier see: [angularx/qrcode as ngModule](https://github.com/Cordobo/angularx-qrcode/tree/18.0.0)
102
+
103
+
104
+
### Import the component and add it to your imports section in your main AppComponent:
105
+
106
+
107
+
```
108
+
// For angular 19, see above for angular 18 and older
109
+
// File: app.component.ts
110
+
// other imports...
111
+
import { QRCodeComponent } from 'angularx-qrcode';
112
+
113
+
@Component({
114
+
selector: "app-root",
115
+
imports: [
116
+
// other component imports...
117
+
QRCodeComponent,
118
+
],
119
+
templateUrl: "./app.component.html",
120
+
styleUrls: ["./app.component.css"],
101
121
})
102
-
export class AppModule { }
122
+
export class AppComponent {
123
+
// your code
124
+
}
103
125
```
104
126
105
127
```
@@ -109,10 +131,10 @@ export class AppModule { }
109
131
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
110
132
```
111
133
112
-
### Generate a QR Code from a string (directive only)
134
+
### Generate a QR Code from a string
113
135
114
-
Now that angular/Ionic know about the new QR Code module,
115
-
let's invoke it from our template with a directive.
136
+
Now that angular/Ionic know about the new QR Code component,
137
+
let's invoke it from our template.
116
138
If we use a simple text-string, we need no additional
0 commit comments