npm install ngx-scrollbar

<ng-scrollbar style="height: 300px; width: 100%;">
  <h6 class="pb-2">Scrollbar </h6>
  <p>I'm quite interested in learning more about <b> custom scrollbars</b> because they are becoming more and more common.</p>
  <p>
  There are various justifications for customizing a scrollbar. For instance, the default scrollbar can cause an app's user interface to look inconsistent across various operating systems. In this case, having a single style is helpful.</p>
  <p>
  I never had the opportunity to learn about CSS scrollbar customization, but I have always been interested in doing so. I'll take the chance to learn more about them and share my trip in this essay.</p>
  <p>
  One crucial point to remember is that, depending on the design, a scrollbar may operate either <b>horizontally or vertically</b> . Additionally, it might alter when you work on a website that is global and operates in both left-to-right and right-to-left orientations.</p>
</ng-scrollbar>

import { Component } from '@angular/core';
import { NgScrollbarModule } from 'ngx-scrollbar';

@Component({
  selector: 'app-scrollbar',
  imports: [NgScrollbarModule],
  templateUrl: './scrollbar.component.html',
  styleUrl: './scrollbar.component.scss'
})

export class ScrollbarComponent {

}

npm uninstall ngx-scrollbar

npm i swiper@11.2.5

<div class="swiper autoplay-swiper swiper-h" #swiperContainer>
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

import { Component, ElementRef, ViewChild } from '@angular/core';
import SwiperCore from 'swiper';
import { Autoplay, Navigation, Pagination } from "swiper/modules";

SwiperCore.use([Navigation, Pagination, Autoplay]);

@Component({
  selector: 'app-swiper',
  imports: [],
  templateUrl: './swiper.component.html',
  styleUrl: './swiper.component.scss'
})
export class SwiperComponent {

  public swiperConfig: any = {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
      delay: 2500,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  };
  
  @ViewChild('swiperContainer', { static: false }) swiperContainer!: ElementRef;

  ngAfterViewInit() {
    if (this.swiperContainer) {
      new SwiperCore(this.swiperContainer.nativeElement, this.swiperConfig);
    }
  }

}

npm uninstall swiper

npm i ngx-bar-rating

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

import { BarRatingModule } from 'ngx-bar-rating';
@Component({
  selector: 'app-rating',
  imports: [BarRatingModule],
  templateUrl: './rating.component.html',
  styleUrl: './rating.component.scss'
})
export class RatingComponent {

  public rating = 2;

}

npm uninstall ngx-bar-rating

npm install sweetalert2

<div class="card-body btn-showcase">
  <button type="button" class="btn btn-primary" (click)="open()">Click it!</button>
</div>

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

@Component({
  selector: 'app-sweet-alert',
  imports: [],
  templateUrl: './sweet-alert.component.html',
  styleUrl: './sweet-alert.component.scss'
})
export class SweetAlertComponent {

  open() {
    Swal.fire({
      title: 'Signed in successfully',
      icon: 'success',
      toast: true,
      position: 'top-start',
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
    })
  }
}

npm uninstall sweetalert2

npm install @angular-slider/ngx-slider

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

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

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

export class RangeSliderComponent {

  public value: number = 550;
  public options: Options = {
    floor: 100,
    ceil: 1000,
  };

}

npm uninstall @angular-slider/ngx-slider

npm install 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>
<div class="btn-showcase image-cropper-modal">
  @if(croppedImage) {
    <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 { Dimensions, ImageCroppedEvent, ImageCropperComponent, ImageTransform } from 'ngx-image-cropper';

@Component({
    selector: 'app-image-crop',
    imports: [ImageCropperComponent],
    templateUrl: './image-crop.component.html',
    styleUrl: './image-crop.component.scss'
})

export class ImageCropComponent {

    public imageChangedEvent: any = '';
    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: any): 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 -= .1;
        this.transform = {
            ...this.transform,
            scale: this.scale
        };
    }

    zoomIn() {
        this.scale += .1;
        this.transform = {
            ...this.transform,
            scale: this.scale
        };
    }

    toggleContainWithinAspectRatio() {
        this.containWithinAspectRatio = !this.containWithinAspectRatio;
    }

    updateRotation() {
        this.transform = {
            ...this.transform,
            rotate: this.rotation
        };
    }

}

npm uninstall ngx-image-cropper

npm install ngx-dropzone-wrapper

<form class="dropzone dropzone-secondary" id="singleFileUpload" action="/upload.php">
  <div class="dropzone-wrapper">
    <div class="dz-message needsclick">
      <i class="fa-solid fa-cloud-arrow-up fa-fade"></i>
      <dropzone [config]="config" [message]="text"></dropzone>
    </div>
  </div>
</form>

import { Component } from '@angular/core';
import { DropzoneConfigInterface, DropzoneModule } from 'ngx-dropzone-wrapper';

@Component({
  selector: 'app-dropzone',
  imports: [DropzoneModule],
  templateUrl: './dropzone.component.html',
  styleUrl: './dropzone.component.scss'
})

export class DropzoneComponent {

  public text = '
Drop files here or click to upload.
 (This is just a demo dropzone. Selected files are not actually uploaded.)'
  
  public config: DropzoneConfigInterface = {
    url: 'https://httpbin.org/post',
    maxFiles: 1,
    uploadMultiple: false,
    addRemoveLinks: true
  };

}

npm uninstall ngx-dropzone-wrapper