npm install @ng-bootstrap/ng-bootstrap

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

npm uninstall @ng-bootstrap/ng-bootstrap

npm i ngx-dropzone-wrapper

<dropzone class="no-preview" [config]="config" [message]="'Drag & Drop your files or Browse'"></dropzone>

// in app.ts
public config: DropzoneConfigInterface = {
  url: 'https://httpbin.org/post',
  addRemoveLinks: true
};

  import { Component } from '@angular/core';
  import { DropzoneConfigInterface, DropzoneModule } from 'ngx-dropzone-wrapper';
  
  @Component({
    selector: 'app-default-file-upload',
    imports:[DropzoneModule],
    templateUrl: './default-file-upload.html',
    styleUrls: ['./default-file-upload.scss']
  })
  
  export class DefaultFileUpload {
  
    public imageConfig: DropzoneConfigInterface = {
      clickable: true,
      url: 'https://httpbin.org/post',
      addRemoveLinks: true,
      parallelUploads: 1,
    };
  
    public text = 'Drag & Drop your files or Browse';
  
  }  

npm uninstall ngx-dropzone-wrapper

npm i sweetalert2

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

import Swal from 'sweetalert2'
...
//method call
basicAlert(){
Swal.fire('Hello')
}

npm uninstall sweetalert2

npm i ngx-owl-carousel-o

<div>Some tags before</div>
<owl-carousel-o [options]="options">
  <ng-template carouselSlide>Slide 1</ng-template>  
  <ng-template carouselSlide>Slide 2</ng-template>  
  <ng-template carouselSlide>Slide 3</ng-template>  
</owl-carousel-o>
<div>Some tags after</div>

// in app.ts
import { CarouselModule } from 'ngx-owl-carousel-o';
import { OwlOptions } from 'ngx-owl-carousel-o';
import { Component } from '@angular/core';

@Component({
  selector: 'app-carousel',
  imports: [CarouselModule],
  templateUrl: 'carousel.html',
  styleUrls: ['.carousel.scss']
})

export class Carousel {
  options: OwlOptions = {
    loop: true,
    dots: false,
    navSpeed: 700,
    navText: ['', ''],
    responsive: {
      0: {
        items: 1
      },
      400: {
        items: 2
      },
      740: {
        items: 3
      },
      940: {
        items: 4
      }
    },
    nav: true
  }
}

npm uninstall ngx-owl-carousel-o

npm i ngx-slider-v2

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

// in app.ts
import { Component } from '@angular/core';
import { NgxSliderModule, Options } from "@angular-slider/ngx-slider";

@Component({
  selector: 'app-range-slider',
  imports: [NgxSliderModule],
  templateUrl: './range-slider.html',
  styleUrl: './range-slider.scss'
})
export class RangeSlider {

  public value: number = 550;
  public options: Options = {
    floor: 100,
    ceil: 1000,
  };
}

npm uninstall ngx-slider-v2

npm i ngx-image-cropper

<div class="card-body">
<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>
<div class="btn-showcase">
  <div class="text-center my-2">
    <img [src]="croppedImage" />
  </div>
  <div class="image-cropper-btn">
    <input class="btn btn-outline-primary" placeholder="Choose Your Image" type="file" (change)="fileChangeEvent($event)" />
  </div>
  <div>
    <button class="btn btn-primary" (click)="rotateLeft()">Rotate left</button>
    <button class="btn btn-primary" (click)="rotateRight()">Rotate right</button>
    <button class="btn btn-primary" (click)="flipHorizontal()">Flip horizontal</button>
    <button class="btn btn-primary" (click)="flipVertical()">Flip vertical</button>
  </div>
  <div>
    <button class="btn btn-primary" (click)="toggleContainWithinAspectRatio()">
      {{ containWithinAspectRatio ? "Fill Aspect Ratio" : "Contain Within Aspect Ratio" }}
    </button>
    <button class="btn btn-primary" (click)="resetImage()">
      Reset image
    </button>
  </div>
  <div>
    <label class="col-form-label" for="rotation">Rotation</label>
    <input class="btn btn-outline-primary ms-2" [(ngModel)]="rotation" placeholder="Rotation" (keyup)="updateRotation()" type="text" onlyNumbers />
  </div>
  <div>
    <button class="btn btn-primary" (click)="zoomOut()">
      Zoom -
    </button>
    <button class="btn btn-primary" (click)="zoomIn()">
      Zoom +
    </button>
  </div>
</div>
</div>
              

// in app.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

import {
  Dimensions,
  ImageCroppedEvent,
  ImageTransform,
  ImageCropperModule,
} from 'ngx-image-cropper';

@Component({
  selector: 'app-image-cropper',
  imports: [ImageCropperModule, FormsModule],
  templateUrl: './image-cropper.html',
  styleUrl: './image-cropper.scss',
})
export class ImageCropper {
  public imageChangedEvent: Event | null = null;
  public croppedImage: string | null | undefined = '';
  public canvasRotation = 0;
  public rotation = 0;
  public scale = 1;
  public showCropper = false;
  public containWithinAspectRatio = false;
  public transform: ImageTransform = {};

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

  imageCropped(event: ImageCroppedEvent) {
    this.croppedImage = event.objectUrl;
  }

  imageLoaded() {
    this.showCropper = true;
  }

  cropperReady(_sourceImageDimensions: Dimensions) {}

  loadImageFailed() {}

  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 -= 0.1;
    this.transform = {
      ...this.transform,
      scale: this.scale,
    };
  }

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

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

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

npm uninstall ngx-image-cropper