npm i ngx-bar-rating

<bar-rating class="star" [(rate)]="cssRate" [max]="5"></bar-rating>

import { Component } from '@angular/core';
import { BarRatingModule } from 'ngx-bar-rating';

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

export class StarRatingBar {

 public cssRate = 1;

}

@import"../../../node_modules/ngx-bar-rating/themes/br-default-theme.scss";

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'],
  standalone: true,
  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

<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'],
    standalone: true
})

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/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'],
    standalone: true,
    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 ng5-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'],
    standalone: true,
    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 { ImageCropperComponent, ImageCroppedEvent, LoadedImage } from 'ngx-image-cropper';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  standalone: true,
  imports: [ImageCropperComponent]
})
export class Your {
    imageent: 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
    }
}