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" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" >
              </dropzone>
          </div>
      </div>
  </div>

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
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,
  };
 

  onUploadError(args: DropzoneConfigInterface): void {
  
  }

  onUploadSuccess(args: DropzoneConfigInterface): void {

  }  
                
}

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
        };
      }
    }