Migrate to standalone

README.md

@@ -11,29 +11,6 @@ For a list of breaking changes and update instructions, go to [releases](https:/
 Only Angular 16+ is supported.
 
 ### Example usage
-Add the ImageCropperModule to the imports of the module which will be using the Image Cropper.
-``` typescript
-import { NgModule } from '@angular/core';
-import { ImageCropperModule } from 'ngx-image-cropper';
-
-@NgModule({
-    imports: [
-        ...
-        ImageCropperModule
-    ],
-    declarations: [
-        ...
-    ],
-    exports: [
-        ...
-    ],
-    providers: [
-        ...
-    ]
-})
-export class YourModule {
-}
-```
 
 Add the element to your HTML:
 ``` html
@@ -53,11 +30,15 @@ Add the element to your HTML:
 <img [src]="croppedImage" />
 ```
 
-And add this to your ts file:
+In your ts file, declare the usage of `ImageCropperComponent` and add the following methods:
 ``` typescript
-import { ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
+import { ImageCropperComponent, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
 import { DomSanitizer } from '@angular/platform-browser';
 
+@Component({
+  standalone: true,
+  imports: [ImageCropperComponent]
+})
 export class YourComponent {
     imageChangedEvent: any = '';
     croppedImage: any = '';

projects/demo-app/src/app/app.component.ts

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
-import { Dimensions, ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
+import { Dimensions, ImageCroppedEvent, ImageTransform, ImageCropperComponent } from 'ngx-image-cropper';
 import { DomSanitizer } from '@angular/platform-browser';
+import { NgIf } from '@angular/common';
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [NgIf, FormsModule, ImageCropperComponent]
 })
 export class AppComponent {
   imageChangedEvent: any = '';

projects/demo-app/src/main.ts

@@ -1,12 +1,18 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {enableProdMode} from '@angular/core';
+import {environment} from './environments/environment';
+import {AppComponent} from './app/app.component';
+import {bootstrapApplication, HAMMER_LOADER} from '@angular/platform-browser';
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+  providers: [
+    {
+      provide: HAMMER_LOADER,
+      useValue: () => import('hammerjs')
+    }
+  ]
+})
   .catch(err => console.error(err));

projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts

@@ -29,12 +29,15 @@ import { HammerStatic } from '../utils/hammer.utils';
 import { getEventForKey, getInvertedPositionForKey, getPositionForKey } from '../utils/keyboard.utils';
 import { first, takeUntil } from 'rxjs/operators';
 import { fromEvent, merge } from 'rxjs';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'image-cropper',
   templateUrl: './image-cropper.component.html',
   styleUrls: ['./image-cropper.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgIf],
 })
 export class ImageCropperComponent implements OnChanges, OnInit {
   private settings = new CropperSettings();

projects/ngx-image-cropper/src/public-api.ts

@@ -1,7 +1,6 @@
 export * from './lib/component/image-cropper.component';
 export * from './lib/services/crop.service';
 export * from './lib/services/load-image.service';
-export * from './lib/image-cropper.module';
 export * from './lib/interfaces';
 export { base64ToFile } from './lib/utils/blob.utils';
 export { resizeCanvas } from './lib/utils/resize.utils';