npm i ngx-bar-rating

<ngb-rating [(rate)]="currentRate"></ngb-rating>

npm i ngx-dropzone

<div class="card-body">
        <div class="customize-dropzone">
            <dropzone class="no-preview " [config]="config" [message]="text"></dropzone>
        </div>
    </div>

import { Component } from '@angular/core';
import { DropzoneConfigInterface, DropzoneModule } from "ngx-dropzone-wrapper";

 @Component({
    selector: 'app-image-perview',
    imports: [DropzoneModule],
    templateUrl: './image-perview.html',
    styleUrls: ['./image-perview.scss']
  })
  export class ImagePerview {
  
    public config: DropzoneConfigInterface = {
      clickable: true,
      url: 'https://httpbin.org/post',
      addRemoveLinks: true,
      parallelUploads: 1,
    };
  
    public text =' 
Drop files here or click to upload.
';
  
  }

npm install --save sweetalert2

<div class="card-body btn-showcase">
<button type="button" class="btn btn-primary" (click)="basicAlert()">Basic</button>
</div>

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')
...
//method call
basicAlert()
{
Swal.fire('Any fool can use a computer')
}

npm i ngx-owl-carousel-o

<div class="card-body">
    <owl-carousel-o [options]="fadeoptionsData" class="carousel slide" id="carouselExampleSlidesOnly">
        @for(fadeItem of crossfadeData; track fadeItem){
         <ng-template carouselSlide class="carousel-inner">
           <div class="carousel-inner">
              <div class="carousel-item active"><img class="d-block w-100" src="{{fadeItem.img}}"
                      alt="drawing-room">
              </div>
          </div>
      </ng-template>
      }
  </owl-carousel-o>
</div>

npm i ng5-slider

<ng5-slider [(value)]="value" [options]="options"></ng5-slider>

npm i ngx-image-cropper

<image-cropper [imageChangedEvent]="imageChangedEvent" [maintainAspectRatio]="true"
  [containWithinAspectRatio]="containWithinAspectRatio" [aspectRatio]="4 / 3" [resizeToWidth]="256"
  [cropperMinWidth]="128" [onlyScaleDown]="true" [roundCropper]="false" [canvasRotation]="canvasRotation"
  [transform]="transform" [alignImage]="'left'" [style.display]="showCropper ? null : 'none'" format="png"
  (imageCropped)="imageCropped($event)" (imageLoaded)="imageLoaded()" (cropperReady)="cropperReady($event)"
  (loadImageFailed)="loadImageFailed()">
 </image-cropper>

import { Component, OnInit } from '@angular/core';
  import { Dimensions, ImageCroppedEvent, ImageTransform } from 'ngx-image-cropper';
  import { FormsModule } from '@angular/forms';
  import { ImageCropperModule } from 'ngx-image-cropper';

@Component({
selector: 'app-image-croper',
imports: [ImageCropperModule,FormsModule],
templateUrl: './image-croper.html',
styleUrls: ['./image-croper.scss']
})

export class ImageCroper {
  imageChangedEvent: any = '';
  croppedImage: any = '';
  canvasRotation = 0;
  rotation = 0;
  scale = 1;
  showCropper = false;
  containWithinAspectRatio = false;
  transform: ImageTransform = {};

  fileChangeEvent(event: any): void {
  this.imageChangedEvent = event;
}

imageCropped(event: ImageCroppedEvent) {
  this.croppedImage = event.base64;
  console.log(event, base64ToFile(event.base64));
}

imageLoaded() {
  this.showCropper = true;
  console.log('Image loaded');
}

cropperReady(sourceImageDimensions: Dimensions) {
   console.log('Cropper ready', sourceImageDimensions);
}

loadImageFailed() {
  console.log('Load failed');
}

rotateLeft() {
  this.canvasRotation--;
  this.flipAfterRotate();
}

rotateRight() {
  this.canvasRotation++;
  this.flipAfterRotate();
}

private flipAfterRotate() {
  const flippedH = this.transform.flipH;
  const flippedV = this.transform.flipV;
  this.transform = {
  ...this.transform,
  flipH: flippedV,
  flipV: flippedH
 };
}

flipHorizontal() {
 this.transform = {
 ...this.transform,
 flipH: !this.transform.flipH
 };
}

flipVertical() {
this.transform = {
...this.transform,
flipV: !this.transform.flipV
 };
}

resetImage() {
  this.scale = 1;
  this.rotation = 0;
  this.canvasRotation = 0;
  this.transform = {};
}

zoomOut() {
  this.scale -= .1;
  this.transform = {
  ...this.transform,
  scale: this.scale
 };
}

zoomIn() {
   this.scale += .1;
   this.transform = {
   ...this.transform,
   scale: this.scale
 };
}

toggleContainWithinAspectRatio() {
  this.containWithinAspectRatio = !this.containWithinAspectRatio;
}

updateRotation() {
   this.transform = {
   ...this.transform,
   rotate: this.rotation
    };
  }
}