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',
	imports: [NgbRatingModule],
	templateUrl: './rating-basic.html',
})

export class NgbdRatingBasic {
	rating = 8;
} 

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

npm i ngx-dropzone

<dropzone body [config]="imageConfig" (error)="onUploadError($event)" (success)="onUploadSuccess($event)" [message]="text" [className]="'custom-dropzone'"></dropzone>
                

//ts file
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';
  
  onUploadError(args: any): void {
    console.log("onUploadError:", args);
  }

  onUploadSuccess(args: any): void {
    console.log("onUploadSuccess:", args);
  }

}

npm install --save sweetalert2

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

// ts 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 BasicExample {

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

}

npm i ngx-owl-carousel-o

    <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>

// ts file
import { Component } from '@angular/core';
import * as Data from '../../../../shared/data/data/bonus-ui/owl-carousel';
import { CarouselModule } from 'ngx-owl-carousel-o';

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

export class SlidesOnly {

  public slidesOnlyOptions = Data.slidesOnlyOptions;
  public slidesOnlyData = Data.slidesOnlyData;

}

//data file
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,
    },
  },
};

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";

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

export class DefaultSlider {
  
  public value: number = 550;
  public 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 { ImageCropperComponent, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  imports: [ImageCropperComponent]
})
export class Your {
    imageChangedEvent: Event | null = null;
    croppedImage: SafeUrl  = '';
    
    constructor(
      private sanitizer: DomSanitizer
    ) {
    }

    fileChangeEvent(event: Event): void {
        this.imageChangedEvent = event;
    }
    imageCropped(event: ImageCroppedEvent) {
      this.croppedImage = this.sanitizer.bypassSecurityTrustUrl(event.objectUrl);
      // event.blob can be used to upload the cropped image
    }
    imageLoaded(image: LoadedImage) {
        // show cropper
    }
    cropperReady() {
        // cropper ready
    }
    loadImageFailed() {
        // show message
    }
}