npm install @ng-bootstrap/ng-bootstrap

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

import { Component } from '@angular/core';
import { NgbRatingModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-rating-basic',
	imports: [NgbRatingModule],
	templateUrl: './rating-basic.html',
})
export class NgbdRatingBasic {
	currentRate = 8;
}

npm uninstall @ng-bootstrap/ng-bootstrap

npm i ngx-dropzone

<!-- in app.component.html -->
 <dropzone [config]="config" [message]="'Drag & Drop your files or Browse'" (error)="onUploadError($event)"
            (success)="onUploadSuccess($event)"></dropzone>

// ts files

import { Component } from '@angular/core';
import { DropzoneConfigInterface, DropzoneModule } from 'ngx-dropzone-wrapper';
@Component({
    selector: 'app-default-file-upload',
    templateUrl: './default-file-upload.html',
    styleUrls: ['./default-file-upload.scss'],
    imports: [DropzoneModule]
})

export class DefaultFileUpload {

    public config: DropzoneConfigInterface = {
        url: 'https://httpbin.org/post',
        maxFilesize: 50,
        addRemoveLinks: true
    };

    onUploadError($event: any) {
        console.log($event);

    }
    onUploadSuccess($event: any) {
        console.log($event);
    }

}

npm i sweetalert2

<div class="card height-equal">
    <div class="card-header card-no-border pb-0">
        <h3>Success Message</h3>
        <p class="f-m-light mt-1">Print the success message.</p>
    </div>
    <div class="card-body btn-showcase">
        <button class="btn btn-success sweet-8" type="button" (click)="successAlert()">Login successfully</button>
    </div>
</div>
        

// in app.component.ts
import { Component } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
    selector: 'app-success-message',
    templateUrl: './success-message.html',
    styleUrls: ['./success-message.scss'],
})
export class SuccessMessage {

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

npm i ngx-owl-carousel-o

// src/styles.sass or src/styles.scss:

@import 'ngx-owl-carousel-o/lib/styles/scss/owl.carousel';
@import 'ngx-owl-carousel-o/lib/styles/scss/owl.theme.default';

// in app.ts

export const slidesOnlyData = [
    { id: 1, img: 'assets/images/slider/11.jpg' },
    { id: 2, img: 'assets/images/slider/9.jpg' },
    { id: 3, img: 'assets/images/slider/6.jpg' },
]

export const slidesOnlyOptions = {
    loop: true,
    autoplay: true,
    mouseDrag: false,
    dots: false,
    nav: false,
    navSpeed: 700,
    responsive: {
        0: {
            items: 1,
        }
    },
}

// in app.html
  <owl-carousel-o [options]="slidesOnlyOptions">
                    @for (slideData of slidesOnlyData; track slideData) {
                    <ng-template carouselSlide class="carousel-item">
                        <img class="d-block w-100" src="{{ slideData.img }}" alt="">
                    </ng-template>
                    }
                </owl-carousel-o>

npm i @angular-slider/ngx-slider

// in app.html
              
<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

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

@Component({
    selector: 'app-default-slider',
    templateUrl: './default-slider.html',
    styleUrls: ['./default-slider.scss'],
    imports: [FormsModule, NgxSliderModule]
})
export class DefaultSlider {

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

npm i ngx-image-cropper

// in app.html

<input type="file" (change)="fileChangeEvent($event)" />

<image-cropper
    [imageChangedEvent]="imageChangedEvent"
    [maintainAspectRatio]="true"
    [aspectRatio]="4 / 3"
    format="png"
    (imageCropped)="imageCropped($event)"
    (imageLoaded)="imageLoaded()"
    (cropperReady)="cropperReady()"
    (loadImageFailed)="loadImageFailed()"
></image-cropper>

<img [src]="croppedImage" />
                

// in app.ts

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

@Component({
    selector: 'app-image-cropper',
    templateUrl: './image-cropper.html',
    styleUrls: ['./image-cropper.scss'],
    imports: [ImageCropperComponent, FormsModule]
})
export class ImageCrop {

  imageChangedEvent: any = '';
  croppedImage: string | null | undefined = '';
  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.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 -= .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
    };
}
}