npm i ngx-bar-rating

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

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

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

@import 'ngx-bar-rating/themes/br-default-theme';

npm i ngx-dropzone

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

//ts file
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 install --save sweetalert2

<div class="card height-equal">
    <div class="card-header">
      <h4>Basic Example</h4>
      <p class="f-m-light mt-1">Print the basic message.</p>
    </div>
    <div class="card-body btn-showcase">
      <button class="btn btn-primary sweet-1" type="button" (click)="basicAlert()">Click it!</button>
    </div>
  </div>

// ts file
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 Zono theme',
      confirmButtonColor: 'var(--theme-default)',
    })
  }

}

npm i ngx-owl-carousel-o

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

// ts file
import { Component } from '@angular/core';
import { slidesOnly, 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 SlidesOnlyComponent {

  public sildesData = slidesOnly;
  public slidesopdtionData = slidesOptions;

}

//data file
export const slidesOnly = [
    {
        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 ng5-slider

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

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

}

npm i ngx-image-cropper

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

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

<img [src]="croppedImage" />

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