Ng-Apexcharts
Ng-Apexcharts is an implementation of apexcharts for angular. It comes with one simple component that enables you to use apexcharts in an angular project.
1. You need to add these files to make ng-apexcharts work.

 <app-apexchart [chartOptions]="chartOptions"></app-apexchart>




    import {ChartComponent,ApexAxisChartSeries, ApexChart,ApexXAxis,ApexDataLabels,ApexTooltip,ApexStroke,ApexYAxis,ApexFill,
              ApexTitleSubtitle,ApexLegend,ApexMarkers, ApexAnnotations} from 'ng-apexcharts';
    import { Apexchart } from '../../../../@spk/app-apexchart/apexcharts';
    export type ChartOptions = {
        series: ApexAxisChartSeries;
        chart: ApexChart;
        dataLabels: ApexDataLabels;
        markers: ApexMarkers;
        title: ApexTitleSubtitle;
        fill: ApexFill;
        yaxis: ApexYAxis;
        xaxis: ApexXAxis;
        tooltip: ApexTooltip;
        stroke: ApexStroke;
        annotations: ApexAnnotations;
        colors: any;
        toolbar: any;
        legend: ApexLegend;
      };
    @Component({
        selector: 'app-area-charts',
        standalone: true,
        imports: [Apexchart],
        templateUrl: './area-charts.component.html',
        styleUrl: './area-charts.component.scss',
      })
      export class AreaCharts {
        chartOptions: any = {
           ...
        }
      }
Type URL
Plugin Link https://apexcharts.com/angular-chart-demos/
Angularx Flatpickr
Angularx Flatpickr is a Angular wrapper for the Flatpickr date picker library, offering a lightweight and customizable solution for selecting dates and times. It provides smooth integration, supports various date formats, and includes features like range selection, time picking, and more.
1. You need to add these files to make basic angularx flatpickr work. 


    <spk-flatpickr [placeholder]="'Choose date and time'" class="form-control" 
    [mode]="'single'" [altInput]="false" [convertModelValue]="true"  [enableTime]="false"
    [dateFormat]="'Y-m-d'"></spk-flatpickr>




    import { FlatpickrDefaults, FlatpickrModule } from 'angularx-flatpickr';
    import { SpkFlatpickrComponent } from '../../../../@spk/spk-flatpickr/spk-flatpickr.component';
    
    @Component({
      selector: 'app-datetimepicker',
      standalone: true,
      imports: [FlatpickrModule,SpkFlatpickrComponent],
      providers:[FlatpickrDefaults],
      templateUrl: './datetimepicker.html',
      styleUrl: './datetimepicker.scss'
    })
    export class DatetimepickerComponent { 

    }
Type URL
Plugin Link https://www.npmjs.com/package/angularx-flatpickr
Ng Select
Ng Select is a flexible, customizable dropdown/select input component for Angular, offering features like multi-select, search, and async options. It provides an intuitive, user-friendly interface with advanced styling and accessibility support.
1. You need to add these files to make basic ng-select work. 


    <spk-ng-select 
    [options]="Selection"
    [selectClass]="'basic-single'"
    [clearable]="true"
    [searchable]="true"
    [hideSelected]="true"
    [placeholder]="'Selection-1'"
    [additionalProperties]="{}">
    </spk-ng-select>




    import { Component } from '@angular/core';
    import { SpkNgSelect } from '../../../@spk/spk-ng-select/spk-ng-select'

    @Component({
      selector: 'app-select',
      standalone: true,
      imports: [SpkNgSelect],
      templateUrl: './select2.html',
      styleUrls: ['./select2.scss']
    })
    export class Select2 {
    
    }
Type URL
Plugin Link https://www.npmjs.com/package/@ng-select/ng-select
Angular ngb-rating
Angular ngb-rating is a component that integrates Rating design system to create customizable, interactive rating systems in Angular applications. It allows users to easily select a rating through stars or other symbols, with built-in support for customization, accessibility, and styling.
1. You need to add these files to make ngb-rating work..


   <app-bar-rating [maxStars]="5" ></app-bar-rating>




 
    import { BarRating } from '../../../@spk/spk-reusable-plugins/bar-rating/bar-rating';
    import { BarRatingModule } from 'ngx-bar-rating';
    @Component({
      selector: 'app-ratings',
      standalone: true,
      imports: [BarRatingModule,BarRating],
      templateUrl: './ratings.html',
      styleUrl: './ratings.scss'
    })
    export class Ratings {
    }
Type URL
Plugin Link https://www.npmjs.com/package/ngx-bar-rating
Alerts :
Angular Bootstrap Alerts are pre-styled, customizable alert components that integrate Bootstrap's alert system with Angular. They provide an easy way to display important messages or notifications, with built-in support for different styles (success, error, info, etc.), dismissible functionality, and seamless Angular integration.
1. You need to add these files to make alerts work.

 
      <spk-alerts
        [variant]="color"
        [title]="title"
      ></spk-alerts>




import { Component, ViewChild } from '@angular/core';
import { SpkAlerts } from '../../../@spk/reusable-ui-elements/spk-alerts/spk-alerts';

@Component({
  selector: 'app-alerts',
  standalone: true,
  imports: [SpkAlerts],
  templateUrl: './alerts.html',
  styleUrls: ['./alerts.scss']
}) 
export class Alerts {
}
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/alert/
Cards :
Angular Bootstrap Cards are versatile, customizable components for displaying content in a flexible, structured layout. They integrate Bootstrap’s card system with Angular, allowing you to create various types of content containers with options for images, headers, footers, and more, making them ideal for building rich, responsive UI elements.
1. You need to add these files to make cards work.


<app-spk-card 
  [cardOptions]="true" 
  [closeable]="true" 
  [collapsable]="true"
>

  <ng-container 
    #header 
    header
  >
    <h3 
      class="card-title"
    >....</h3>
  </ng-container>

  <ng-container>
  ......
  </ng-container>

  <ng-container 
    #footer 
    footer
  >
    .....
  </ng-container>

</app-spk-card>



import { Component } from '@angular/core';
import { SpkCard } from '../../@spk/spk-card/spk-card';

    @Component({
        selector: 'app-cards',
        standalone: true,
        imports: [SpkCard],
        templateUrl: './cards.html',
        styleUrl: './cards.scss'
      })
      export class Cards {

 }
Breadcrumb :
Angular Bootstrap Breadcrumb is a navigation component that displays a series of links to help users understand their location within a hierarchical structure. It seamlessly integrates with Bootstrap’s breadcrumb styling, offering customizable options for separators, active links, and responsive behavior in Angular applications.
1. You need to add these files to make breadcrumb work.
Dropdown :
Angular Bootstrap Dropdown is a component that provides a simple way to create dropdown menus in Angular applications, following Bootstrap's design conventions. It supports various options like single or multi-level menus, alignment, and customization of triggers (e.g., buttons or links), making it easy to build responsive, interactive dropdowns with minimal effort.
1. You need to add these files to make dropdown work.
Progress :
Angular Bootstrap Progress is a component that allows you to display progress bars in Angular applications, indicating the completion status of tasks or operations. It integrates seamlessly with Bootstrap’s progress bar styles, supporting features like custom labels, striped animations, and varying bar colors for easy customization and responsiveness.
1. You need to add these files to make progress work.

<spk-progress  [barClass]="'bg-primary'" [showLabel]="false"></spk-progress>




import { Component } from '@angular/core';
    import { SpkProgress } from '../../../@spk/reusable-ui-elements/spk-progress/spk-progress';
    @Component({
      selector: 'app-progress',
      standalone: true,
      imports: [SpkProgress],
      templateUrl: './progress.html',
      styleUrls: ['./progress.scss']
    })
    export class Progress {
  
 }
Toast :
Angular Bootstrap Toast is a component that provides a simple way to create toast menus in Angular applications, following Bootstrap's design conventions. It supports various options like single or multi-level menus, alignment, and customization of triggers (e.g., buttons or links), making it easy to build responsive, interactive toasts with minimal effort.
1. You need to add these files to make toast: work.

 <spk-toast (hide)="show = false" [autohide]="false" content=" Hello, world! This is a toast message"></spk-toast>




import { Component } from '@angular/core';
    import { SpkToast } from '../../../@spk/reusable-ui-elements/spk-toast/spk-toast';
    @Component({
      selector: 'app-toasts',
      standalone: true,
      imports: [SpkToast],
      templateUrl: './toasts.html',
      styleUrls: ['./toasts.scss']
    })
    export class Toasts {
  
 }
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/toast/overview
Accordions :
Angular Bootstrap Accordion is a component that allows you to display collapsible content panels in a stack, ideal for organizing large amounts of content in a compact, interactive layout. It integrates with Bootstrap’s accordion system, supporting features like multiple or single panel expansion, custom styling, and smooth animations, making it easy to create dynamic, space-efficient UIs in Angular applications.
1. You need to add these files to make accordions work.

 <spk-ngb-accordion [accordionId]="'accordionExample'" [closeOthers]="true" [accordionItems]="basicAccordions"></spk-ngb-accordion>




import { Component } from '@angular/core';
    import { NgbAccordion } from '../../../@spk/spk-reusable-plugins/ngb-accordion/ngb-accordion';

    @Component({
        selector: 'app-accordions',
        standalone: true,
        imports: [NgbAccordion],
        schemas:[CUSTOM_ELEMENTS_SCHEMA],
        templateUrl: './accordions.html',
        styleUrl: './accordions.scss'
      })
      export class Accordions {
        basicAccordions=[
        { 
          title: 'Accordion Item #1',
          headingId: 'headingOne',
          collapseId: 'collapseOne', 
          collapsed: false
         },
  }
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/accordion/overview
Carousel :
Angular Bootstrap Carousel is a component for creating responsive, interactive image sliders or carousels in Angular applications. It integrates seamlessly with Bootstrap’s carousel system, offering features like slide transitions, controls, indicators, and automatic cycling, allowing you to display a series of content in an engaging and user-friendly way.
1. You need to add these files to make carousel work.

import { Component } from '@angular/core';
    import { NgbCarousel } from '../../../@spk/spk-reusable-plugins/ngb-carousel/ngb-carousel';

    @Component({
        selector: 'app-carousel',
        standalone: true,
        imports: [NgbCarousel],
        templateUrl: './carousel.html',
        styleUrl: './carousel.scss'
      })
      export class Carousel {
        images = [
        './assets/images/media/media-26.jpg',
        './assets/images/media/media-27.jpg',
        './assets/images/media/media-33.jpg',
      ];
      }
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/carousel/examples