Merge pull request #45 from rars/angular-update

Author: rars

CHANGELOG.md

@@ -2,28 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [4.0.0](https://github.com/rars/ngx-diff/compare/v3.0.0...v4.0.0) (2023-05-07)
+## [5.0.0](https://github.com/rars/ngx-diff/compare/v4.0.0...v5.0.0) (2023-05-07)
+
+### Features
 
+- **ngx-diff:** convert components/pipes to standalone, remove `NgxDiffModule` ([712a34b](https://github.com/rars/ngx-diff/commit/712a34bc02dc33b2ec02a163409417c4334d020a))
+- **ngx-diff:** update to Angular 16 ([6e79821](https://github.com/rars/ngx-diff/commit/6e79821b6a78f7cd750ae29d4c63a895cb97b19d))
+
+## [4.0.0](https://github.com/rars/ngx-diff/compare/v3.0.0...v4.0.0) (2023-05-07)
 
 ### Features
 
-* **ngx-diff:** update to Angular 15 ([16de002](https://github.com/rars/ngx-diff/commit/16de0025724e6888ddd06308e6a8cabecf685210))
+- **ngx-diff:** update to Angular 15 ([16de002](https://github.com/rars/ngx-diff/commit/16de0025724e6888ddd06308e6a8cabecf685210))
 
 ## [3.0.0](https://github.com/rars/ngx-diff/compare/v2.0.0...v3.0.0) (2023-05-07)
 
-
 ### Features
 
-* **ngx-diff:** add CSS variables for customising appearance of diff ([5b4b818](https://github.com/rars/ngx-diff/commit/5b4b81803aae4a7b210babfd5478158022122238))
-* **ngx-jwt:** add selectedLineChange output event and allow lines to be selected ([002e8db](https://github.com/rars/ngx-diff/commit/002e8dbb0db765edc8d578c6c507f0420d84b9a1))
-* **ngx-jwt:** mark DiffMatchPatchService as providedIn root ([dd13fab](https://github.com/rars/ngx-diff/commit/dd13fabeedb8546bdc0f0c1bacc33cbaca06d682))
+- **ngx-diff:** add CSS variables for customising appearance of diff ([5b4b818](https://github.com/rars/ngx-diff/commit/5b4b81803aae4a7b210babfd5478158022122238))
+- **ngx-jwt:** add selectedLineChange output event and allow lines to be selected ([002e8db](https://github.com/rars/ngx-diff/commit/002e8dbb0db765edc8d578c6c507f0420d84b9a1))
+- **ngx-jwt:** mark DiffMatchPatchService as providedIn root ([dd13fab](https://github.com/rars/ngx-diff/commit/dd13fabeedb8546bdc0f0c1bacc33cbaca06d682))
 
 ## [2.0.0](https://github.com/rars/ngx-diff/compare/v1.0.0...v2.0.0) (2023-05-06)
 
-
 ### Features
 
-* **ngx-diff:** update to Angular 14 ([e95fbaa](https://github.com/rars/ngx-diff/commit/e95fbaaf5b52ad40a3e519ec0d8f5a11ac5a60c8))
+- **ngx-diff:** update to Angular 14 ([e95fbaa](https://github.com/rars/ngx-diff/commit/e95fbaaf5b52ad40a3e519ec0d8f5a11ac5a60c8))
 
 ## [1.0.0](https://github.com/rars/ngx-diff/compare/v0.4.0...v1.0.0) (2022-03-21)
 

README.md

@@ -10,10 +10,12 @@ Angular component library for displaying diffs of text. [Demo](https://rars.gith
    ```
    npm install ngx-diff diff-match-patch-ts --save
    ```
-2. Import `NgxDiffModule` to your app:
+2. Either:
+
+   2.1. If you are using this component in an NgModule-based setting, add `InlineDiffComponent` to your module's `imports`:
 
    ```typescript
-   import { NgxDiffModule } from 'ngx-diff';
+   import { InlineDiffComponent } from 'ngx-diff';
 
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
@@ -22,16 +24,35 @@ Angular component library for displaying diffs of text. [Demo](https://rars.gith
 
    @NgModule({
      declarations: [AppComponent],
-     imports: [BrowserModule, NgxDiffModule],
+     imports: [BrowserModule, InlineDiffComponent],
      providers: [],
      bootstrap: [AppComponent],
    })
    export class AppModule {}
    ```
 
+   2.2. Or if you are using this component in a standalone component setting, add `InlineDiffComponent` to your component's `imports`:
+
+   ```typescript
+   import { InlineDiffComponent } from 'ngx-diff';
+
+   import { Component } from '@angular/core';
+
+   @Component({
+     selector: 'app-root',
+     templateUrl: './app.component.html',
+     styleUrls: ['./app.component.scss'],
+     standalone: true,
+     imports: [InlineDiffComponent],
+   })
+   export class AppComponent {
+     // ...
+   }
+   ```
+
 3. Use the `inline-diff` component by setting the `oldText` and `newText` attributes:
    ```HTML
-   <inline-diff [oldText]="oldDocumentContents" [newText]="newDocumentContents" [lineContextSize]="4"></inline-diff>
+   <inline-diff [oldText]="oldDocumentContents" [newText]="newDocumentContents" [lineContextSize]="4" />
    ```
 
 ## Theming
@@ -67,7 +88,7 @@ Then use this class in your desired component in your HTML template:
     [newText]="newText"
     [lineContextSize]="4"
     style="width: 100%"
-    (selectedLineChange)="selectedLineChange($event)"></inline-diff>
+    (selectedLineChange)="selectedLineChange($event)" />
 ```
 
 It is recommended to use these settings rather than attempt to override styles based upon DOM structure or class names that are internal details that may change.
@@ -83,6 +104,7 @@ It is recommended to use these settings rather than attempt to override styles b
 | 14              | 2.0.0            |
 | 14              | 3.0.0            |
 | 15              | 4.0.0            |
+| 16              | 5.0.0            |
 
 ## Contributions welcome!