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
`markdown-toc` appears somewhat abandoned, with a PR I raised to upgrade
`remarkable` going unlooked at ~6 months.
(ref: jonschlinkert/markdown-toc#199)
replace it with `remark` / `remark-toc` to clear CVE warnings.
This library ships with [standalone components](https://angular.dev/reference/migrations/standalone)
52
57
53
58
How you consume it depends on whether you have migrated to standalone components (the default since Angular v19)
54
59
55
60
#### Standalone Component
56
61
57
62
Add the `QrCodeComponent` or `QrCodeDirective` to your `@Component` declarations `imports` array. Eg:
63
+
58
64
```typescript
59
65
import { QrCodeComponent } from'ng-qrcode';
60
66
@@ -71,9 +77,11 @@ export class AppComponent {
71
77
// ...
72
78
}
73
79
```
80
+
74
81
#### NgModule
75
82
76
83
If you're still using `NgModule` / non-standalone components, then you can add `QrCodeComponent` or `QrCodeDirective` to your `@NgModule` declarations `imports` array. Eg:
84
+
77
85
```typescript
78
86
import { QrCodeComponent } from'ng-qrcode';
79
87
@@ -89,50 +97,59 @@ There is also a deprecated `QrCodeModule` that can be imported.
89
97
## Usage
90
98
91
99
### Component
100
+
92
101
```angular17html
93
102
<qr-code value="Hello world!"
94
103
size="300"
95
104
errorCorrectionLevel="M" />
96
-
```
105
+
```
106
+
107
+
#### value: string (required)
97
108
98
-
#### value: string (required)
99
109
The value to encode in the QR code, eg: a url
100
110
101
111
#### size: string | number (optional)
112
+
102
113
An optional size in pixels to render at
103
114
104
115
**Default:** automatic size based on the value provided (recommended)
105
116
106
117
#### darkColor: RGBAColor (optional)
118
+
107
119
An RGBA Hex string to use as the color for the dark / filled modules.
108
120
If an invalid value is passed, the default will be used.
109
121
110
122
**Default** black ("#000000FF")
111
123
112
124
#### lightColor: RGBAColor (optional)
125
+
113
126
An RGBA Hex string to use as the color for the empty space.
114
127
If an invalid value is passed, the default will be used.
115
128
116
129
**Default** white ("#FFFFFFFF")
117
130
118
-
#### style: { [klass: string]: any; } (optional)
131
+
#### style: { \[klass: string]: any; } (optional)
132
+
119
133
Inline style object, passed to the inner canvas element as `[ngStyle]`
120
134
121
135
#### styleClass: string (optional)
136
+
122
137
CSS Class, passed to the inner canvas element
123
138
124
139
#### errorCorrectionLevel: string (optional)
125
-
Controls the amount of redundant information included to make the QR code
140
+
141
+
Controls the amount of redundant information included to make the QR code
126
142
more likely to scan correctly if it is dirty / damaged
127
143
128
144
**Default:** "M"
129
145
130
-
Valid values: "L", "M", "Q", "H" - where "L" is the lowest
146
+
Valid values: "L", "M", "Q", "H" - where "L" is the lowest
131
147
amount of redundancy, and "H" is the highest
132
148
133
149
See: https://www.npmjs.com/package/qrcode#error-correction-level for further details
134
150
135
151
#### centerImageSrc: string (optional)
152
+
136
153
A URI suitable to use an a [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) src
137
154
property to load and render in the center of the QR code.
138
155
@@ -141,35 +158,42 @@ the side of a higher error correction level, anecdotally when the size is less t
141
158
of the size of the code, with at least "M" error correction, it is generally still scannable.
142
159
143
160
#### centerImageSize: string | number (optional)
161
+
144
162
An optional size in pixels to render the center image.
145
163
146
164
**Default:** 60
147
165
148
166
#### margin: number (optional)
167
+
149
168
An optional amount of margin to be rendered within the canvas element. Defaults to 4,
150
169
where the unit is the size of one "dot" in the QR code.
151
170
152
171
#### scale: number (optional)
172
+
153
173
Only used when size not provided. Represents the number of pixels per module/dot. Defaults to 4.
154
174
155
175
#### maskPattern: number (optional)
176
+
156
177
Mask pattern used. Defaults to selecting the best based on content.
157
178
158
179
### Directive
180
+
159
181
If the provided component is not flexible enough for you, there is also a [directive](projects/ng-qrcode/src/lib/qr-code.directive.ts)
160
-
provided that is used by the [component](projects/ng-qrcode/src/lib/qr-code.component.ts) under the hood, which provides finer
182
+
provided that is used by the [component](projects/ng-qrcode/src/lib/qr-code.component.ts) under the hood, which provides finer
0 commit comments