npm i ngx-bar-rating

<bar-rating class="bar" [(rate)]="faRate" [max]="10" [theme]="'horizontal'" [showText]="true"></bar-rating>

<!-- Owl css -->
import { Component } from '@angular/core';
import { BarRatingModule } from 'ngx-bar-rating';

@Component({
    selector: 'app-one-to-ten-rating-bar',
    templateUrl: './one-to-ten-rating-bar.html',
    styleUrls: ['./one-to-ten-rating-bar.scss'],
    imports: [BarRatingModule]
})

export class OneToTenRatingBar {

  public faRate = 7;

}

npm i ngx-dropzone-wrapper

<dropzone [config]="imageConfig" 
[message]="text" [className]="'custom-drop-zone'"></dropzone>

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 imageConfig: DropzoneConfigInterface = {
    clickable: true,
    url: 'https://httpbin.org/post',
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    parallelUploads: 1,
  };

  public text = 'Drag & Drop your files or Browse'


}

npm i sweetalert2

<button class="btn btn-primary sweet-1 mb-0" type="button" (click)="basicAlert()">Click it!</button>

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

@Component({
    selector: 'app-basic-example',
    templateUrl: './basic-example.html',
    styleUrls: ['./basic-example.scss'],
})

export class BasicExample {

  basicAlert() {
    Swal.fire({
      title: 'Welcome! to the  theme',
      confirmButtonColor: 'var(--theme-default)',
    })
  }

}

npm i ngx-owl-carousel-o

<owl-carousel-o [options]="slidesOptionData" class="carousel slide" id="carouselExampleSlidesOnly">
    @for(slideItem of slidesData; track slideItem){
        <ng-template carouselSlide class="carousel-inner">
            <div class="carousel-item active">
            <img class="d-block w-100" src="{{ slideItem.img }}">
            </div>
        </ng-template>
    }
</owl-carousel-o>

import { Component } from '@angular/core';
import { slideOnly, slidesOptions } from '../../../../shared/data/bonus-ui/owl-carousel';
import { CarouselModule } from 'ngx-owl-carousel-o';

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

export class SlidesOnly {

  public slidesData = slideOnly;
  public slidesOptionData = slidesOptions;

}

export const slideOnly = [
  {
    img: 'assets/images/slider/11.jpg',
  },
  {
    img: 'assets/images/slider/9.jpg',
  },
  {
    img: 'assets/images/slider/6.jpg',
  },
];

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

npm i @angular-slider/ngx-slider

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

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

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

export class DefaultRangeSlider {

  public value: number = 550;

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

}

  <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 image-cropper">
  <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>

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