npm i ngx-bar-rating

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

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>

// ES6 Modules or TypeScript
import { Component } from '@angular/core';
import { CardComponent } from "../../../../shared/components/card/card";
import Swal from 'sweetalert2';

@Component({
  selector: 'app-basic-example',
  templateUrl: './basic-example.html',
  styleUrls: ['./basic-example.scss']
  imports: [CardComponent]
})

export class BasicExample {

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

}

npm i ngx-owl-carousel-o

<div class="card">
  <div class="card-header">
    <h4>Slides Only </h4>
    <p class="f-m-light mt-1">The <code>.active</code> class needs to be added to one of the slides otherwise the
      carousel will not be visible.<code>.d-block</code> and <code>.w-100 </code> on carousel images to prevent browser
      default image alignment.</p>
  </div>
  <div class="card-body">
    <div class="carousel slide" id="carouselExampleSlidesOnly" data-bs-ride="carousel">
      <div class="carousel-inner">
        <owl-carousel-o [options]="slidesOnlyOptions">
          <ng-template carouselSlide class="carousel-item" *ngFor="let slideData of slidesOnlyData">
            <img class="d-block w-100" [src]="slideData.img" alt="">
        </ng-template>  
        </owl-carousel-o>
      </div>
    </div>
  </div>
</div>

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;

}

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

<div class="card">
    <div class="card-header">
        <h4>Default Range Slider</h4>
        <p class="f-m-light mt-1">
            Use the <code>.range-slider </code> class. and Lagos used Ion range
            slider.<code>[http://ionden.com/a/plugins/ion.rangeSlider]</code></p>
    </div>
    <div class="card-body">
        <form class="theme-form form-label-align-right range-slider">
            <div class="form-group row py-1">
                <div class="col-md-10">
                    <ngx-slider [(value)]="value" [options]="options"></ngx-slider>
                </div>
            </div>
        </form>
    </div>
</div>

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

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

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

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()">
 </image-cropper>

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