Used Plugins & Reference Links

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.
        
        
        
        
        
            import {ChartComponent,ApexAxisChartSeries, ApexChart,ApexXAxis,ApexDataLabels,ApexTooltip,ApexStroke,ApexYAxis,ApexFill,
                      ApexTitleSubtitle,ApexLegend,ApexMarkers, ApexAnnotations} from 'ng-apexcharts';
            import { SpkApexchartsComponent } from '../../../../@spk/spk-apexcharts/apexcharts.component';
            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: [SpkApexchartsComponent],
                templateUrl: './area-charts.component.html',
                styleUrl: './area-charts.component.scss',
              })
              export class AreaChartsComponent {
                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. 
        
        
        
        
        
            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.component.html',
              styleUrl: './datetimepicker.component.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. 
        
        
        
        
        
            import { Component } from '@angular/core';
            import { SpkNgSelectComponent } from '../../../@spk/spk-ng-select/spk-ng-select.component'
        
            @Component({
              selector: 'app-select',
              standalone: true,
              imports: [SpkNgSelectComponent],
              templateUrl: './select2.component.html',
              styleUrls: ['./select2.component.scss']
            })
            export class Select2Component {
            
            }
Type URL
Plugin Link https://www.npmjs.com/package/@ng-select/ng-select
Ngx Easy Table
Ngx Easy Table is a Angular wrapper for the Ngx Easy table library, enabling the creation of interactive, customizable, and responsive data tables. It supports features like sorting, filtering, pagination, and inline editing, with a focus on performance and easy integration into Angular projects.
1. You need to add these files to make basic ngx-easy-table work. 
        
        
        
        
        
            import { ChangeDetectionStrategy, Component } from '@angular/core';
            import { NgxReusableTableComponent } from '../../../@spk/spk-reusable-plugins/ngx-reusable-table/ngx-reusable-table.component';
            @Component({
              selector: 'app-ngx-easy-table',
              standalone: true,
              imports: [NgxReusableTableComponent],
              templateUrl: './ngx-easy-table.component.html',
              styleUrl: './ngx-easy-table.component.scss',
              changeDetection: ChangeDetectionStrategy.OnPush,
            })
            
            export class NgxEasyTableComponent {
            
            }
Type URL
Plugin Link https://www.npmjs.com/package/ngx-easy-table
Basic Table :
Angular Basic tables are simple, customizable table components for displaying structured data in a clean and responsive layout
1. You need to add these files to make basic default table work.
        
        
        
        
        
        import { Component } from '@angular/core';
        import { SpkReusableTablesComponent } from '../../../@spk/spk-reusable-tables/spk-reusable-tables.component';
        @Component({
          selector: 'app-tables',
          standalone: true,
          imports: [SpkReusableTablesComponent],
          templateUrl: './tables.component.html',
          styleUrl: './tables.component.scss'
        })
        export class TablesComponent {
          basicColumn=[
            {header:"Name",field:"Name"},         
            {header:"Created On",field:"Created On"},
            {header:"Number",field:"Number"},
            {header:"Status",field:"Status"}
        
          ]
        }
Angular Material Data Tables :
Angular Material Dat Tables is a flexible, feature-rich table component for Angular that simplifies the process of displaying and managing large datasets. It includes built-in support for sorting, pagination, search, and filtering, and can be easily customized for a seamless integration into Angular applications.
1. You need to add these files to make Angular Material Data Tables work.
Type URL
Plugin Link https://material.angular.io/components/table/examples
Angular ngx-bar-rating
Angular ngx-bar-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 ngx-bar-rating work..
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.
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/alert/
Buttons :
Angular Bootstrap Buttons are pre-styled, responsive button components that follow Bootstrap’s design system, offering various styles, sizes, and colors.They provide an easy-to-use and customizable solution for creating interactive buttons in Angular applications, with support for icons, loading states, and more.
1. You need to add these files to make buttons work.
Badges :
Angular Bootstrap Badges are small, customizable components used to display labels, notifications, or counters within your Angular application. They integrate seamlessly with Bootstrap’s design system and support various styles, colors, and positions, making them ideal for highlighting important information or adding context to UI elements like buttons, links, or navigation items.
1. You need to add these files to make badges work.
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.
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.
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.
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.
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.
Type URL
Plugin Link https://ng-bootstrap.github.io/#/components/carousel/examples
Ribbons :
The Angular Ribbon offers a simplified mode that organizes items and groups into a single row for improved usability and reduced clutter. End users can quickly navigate to other commonly used items in the overflow menu and switch to normal mode using built-in toggle button.
1. You need to add these files to make ribbons work.