Add CropperComponent and ImageCropperComponent into your UIComponentsModule class. ui-components.module.ts would look like this

import {NgModule} from '@angular/core';
import { ImageCropperModule } from 'ngx-image-cropper';
import { CropperComponent } from './extra/cropper/cropper.component';

@NgModule({
declarations: [CropperComponent, ImageCropperModule]
})
export class UIComponentsModule { }
              

cropper.component.html would look like this

      <div class="file-upload">
              <span class="text">upload</span>
              <input id="custom-input" type="file" (change)="fileChangeEvent($event)">
            </div>
            <image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true" [aspectRatio]="4 / 3"
            format="png" (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()"
            (cropperReady)="cropperReady()" (loadImageFailed)="loadImageFailed()" class="float-left mr-4 img-fluid"></image-cropper>
            <br>
            <span class="result rounded">
              <img [src]="croppedImage" class="rounded-circle">
            </span>
                      

cropper.component.ts would look like this

      import { Component, ViewChild } from '@angular/core';
      import { ImageCroppedEvent  } from 'ngx-image-cropper';

      @Component({
        selector: 'app-cropper',
        templateUrl: './cropper.component.html',
        styleUrls: ['./cropper.component.scss']
      })
      export class CropperComponent {

          imageChangedEvent: any = '';
          croppedImage: any = '';

          fileChangeEvent(event: any): void {
              this.imageChangedEvent = event;
          }
          imageCropped(event: ImageCroppedEvent) {
              this.croppedImage = event.base64;
          }
          imageLoaded() {
              // show cropper
          }
          cropperReady() {
              // cropper ready
          }
          loadImageFailed() {
              // show message
          }

      }