npm i ngx-bar-rating

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

npm i  ngx-dropzone-wrapper

<div class="card">
      <div class="card-header">
          <h3>Default File Upload</h3>
          <p class="mt-1 mb-0">We use the create method to turn a<code>[https://pqina.nl/filepond/]</code></p>
      </div>
      <div class="card-body">
          <div class="no-preview" type="file">
              <dropzone [config]="Config" >
              </dropzone>
          </div>
      </div>
  </div>

 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { DropzoneConfigInterface, DropzoneModule } from 'ngx-dropzone-wrapper';
    
  @Component({
    selector: 'app-default-file-upload',
    imports: [CommonModule,DropzoneModule],
    templateUrl: './default-file-upload.html',
    styleUrl: './default-file-upload.scss'
 })
export class DefaultFileUpload {
      
   public Config: DropzoneConfigInterface = {
    clickable: true,
    url: 'https://httpbin.org/post',
    addRemoveLinks: true,
    parallelUploads: 1,
  }; 
    
      
}                                   

npm i sweetalert2

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

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-basic-sweetalert',
  imports: [CommonModule],
  templateUrl: './basic-sweetalert.html',
  styleUrl: './basic-sweetalert.scss'
})
export class BasicSweetalert {

  basicAlert() {
    Swal.fire({
      title: 'Good job!',
      text: 'You clicked the button!',
      icon: 'success',
      confirmButtonColor: 'var(--theme-deafult)',
    })
  }
}

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 } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Dimensions, ImageCroppedEvent, ImageTransform, } from 'ngx-image-cropper';
import { ImageCropperModule } from 'ngx-image-cropper';
import { FormsModule } from '@angular/forms';
  
@Component({
selector: 'app-image-croper',
imports: [CommonModule,FormsModule,ImageCropperModule],
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
    };
  }
}