npm i ngx-bar-rating

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

npm install --save sweetalert2

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

// TypeScript file
  import { Component } from '@angular/core';
  import Swal from 'sweetalert2';
  
  @Component({
      selector: 'app-basic-example',
      imports: [],
      templateUrl: './basic-example.html',
      styleUrls: ['./basic-example.scss']
  })
  export class BasicExampleComponent {
  
    basicAlert() {
  
      Swal.fire({
        title: 'Welcome! to the Cion theme',
        confirmButtonColor: 'var(--theme-default)',
      })
    }                             
}

npm i ngx-owl-carousel-o

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

npm i ng5-slider

 <ngx-slider [(value)]="value" [options]="options"></ngx-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 {
    Dimensions,
    ImageCroppedEvent,
    ImageCropperComponent,
    ImageTransform,
  } from 'ngx-image-cropper';
  
  @Component({
    selector: 'app-image-cropper',
    imports: [ImageCropperComponent],
    templateUrl: './image-cropper.html',
    styleUrls: ['./image-cropper.scss'],
  })
  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,
      };
    }
  }