npm i ngx-bar-rating

<bar-rating class="bar" [(rate)]="faRate" [max]="10" [theme]="'horizontal'" [showText]="true"></bar-rating>

import { Component } from '@angular/core';
import { BarRatingModule } from 'ngx-bar-rating';
import { CardComponent } from "../../../../shared/components/card/card.component";

@Component({
    selector: 'app-number-rating',
    templateUrl: './number-rating.component.html',
    styleUrls: ['./number-rating.component.scss'],
    imports: [BarRatingModule, CardComponent]
})

export class NumberRatingComponent {

  public faRate = 7;

}

                    

npm install --save sweetalert2

<app-card [header]="true" [body]="true" [cardClass]="'height-equal'" [cardBodyClass]="'btn-showcase'">
  <h5 header>Basic Example</h5>
  <p header class="f-m-light mt-1">Print the basic message.</p>
  <button body class="btn mb-0 btn-primary sweet-1" type="button" (click)="basicAlert()">Click it!</button>
</app-card>

import { Component } from '@angular/core';
import Swal from 'sweetalert2';
import { CardComponent } from "../../../../shared/components/card/card.component";

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

export class BasicExampleComponent {

  basicAlert(){
    Swal.fire({
      title : 'Welcome! to the Moscow 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>

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

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

export class SlidesOnlyComponent {

  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 @angular-slider/ngx-slider

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

import { NgxSliderModule, Options } from "@angular-slider/ngx-slider";
import { Component } from "@angular/core";
import { CardComponent } from "../../../../shared/components/card/card.component";

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

export class DefaultSliderComponent {
  
  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 YourComponent {
    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
    }
}