Skip to content

Commit

Permalink
docs: update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
mnahkies committed Jan 5, 2025
1 parent 3fad1d1 commit 2816d2c
Showing 1 changed file with 35 additions and 5 deletions.
40 changes: 35 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
Easy to use QR code generator for Angular projects.

**Features:**
* Compatible with Angular 18
* Compatible with Angular 19, uses `standalone` components
* Leverages the widely used [qrcode](https://www.npmjs.com/package/qrcode)
package to do the heavy lifting
* Renders to HTML Canvas
Expand All @@ -16,6 +16,9 @@ Easy to use QR code generator for Angular projects.
<!-- toc -->

- [Installation](#installation)
- [Importing](#importing)
- [Standalone Component](#standalone-component)
- [NgModule](#ngmodule)
- [Usage](#usage)
- [Component](#component)
- [value: string (required)](#value-string-required)
Expand All @@ -42,19 +45,45 @@ Add as a dependency to your angular application:

npm install ng-qrcode --save

## Usage
Import into your consuming module (Eg: AppModule):
### Importing
This library ships with [standalone components](https://angular.dev/reference/migrations/standalone)

How you consume it depends on whether you have migrated to standalone components (the default since Angular v19)

#### Standalone Component

Add the `QrCodeComponent` or `QrCodeDirective` to your `@Component` declarations `imports` array. Eg:
```typescript
import { QrCodeComponent } from 'ng-qrcode';

@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"],
standalone: true,
imports: [
QrCodeComponent,
]
})
export class AppComponent {
// ...
}
```
#### NgModule

If you're still using `NgModule` / non-standalone components, then you can add `QrCodeComponent` or `QrCodeDirective` to your `@NgModule` declarations `imports` array. Eg:
```typescript
import { QrCodeModule } from 'ng-qrcode';
import { QrCodeComponent } from 'ng-qrcode';

@NgModule({
imports: [
QrCodeModule
QrCodeComponent
]
})
```

## Usage

### Component
```angular17html
<qr-code value="Hello world!"
Expand Down Expand Up @@ -135,6 +164,7 @@ major version.

| Angular Version | ng-qrcode Versions |
|-----------------|--------------------|
| ^19 | ^19 |
| ^18 | ^18 |
| ^17 | ^17 |
| ^16 | ^16 |
Expand Down

0 comments on commit 2816d2c

Please sign in to comment.