Dashlot - Angular Premium Admin & Dashboard Template

Reusable Compoenents

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.

HTML
TS

        
 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.

HTML
TS

          
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.

HTML
TS

                
    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.

HTML
TS

                
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 angularx flatpickr work.

HTML
TS

                
    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.

HTML
TS

                
  import { SpkAngularMaterialTablesComponent } from '../../../@spk/spk-reusable-plugins/spk-angular-material-tables/spk-angular-material-tables.component';
  @Component({
    selector: 'app-angular-material-tables',
    standalone: true,
    imports: [SpkAngularMaterialTablesComponent],
    templateUrl: './angular-material-tables.component.html',
    styleUrl: './angular-material-tables.component.scss'
  })
  export class AngularMaterialTablesComponent {
      dataSource = [
      { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
      { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
    ];
  }

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.

HTML
TS

                
  import { BarRatingComponent } from '../../../@spk/spk-reusable-plugins/bar-rating/bar-rating.component';
  import { BarRatingModule } from 'ngx-bar-rating';
  @Component({
    selector: 'app-ratings',
    standalone: true,
    imports: [BarRatingModule,BarRatingComponent],
    templateUrl: './ratings.component.html',
    styleUrl: './ratings.component.scss'
  })
  export class RatingsComponent {
  }

Type	URL
Plugin Link	https://www.npmjs.com/package/ngx-bar-rating

Alerts :

Ng 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.

HTML
TS

                
    import { Component, ViewChild } from '@angular/core';
    import { SpkAlertsComponent } from '../../../@spk/reusable-ui-elements/spk-alerts/spk-alerts.component';
    
    @Component({
      selector: 'app-alerts',
      standalone: true,
      imports: [SpkAlertsComponent],
      templateUrl: './alerts.component.html',
      styleUrls: ['./alerts.component.scss']
    }) 
    export class AlertsComponent {
    }

Type	URL
Plugin Link	https://ng-bootstrap.github.io/#/components/alert/

Badges :

Ng 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.

HTML
TS

                
  import { Component } from '@angular/core';
  import { SpkBadgesComponent } from '../../../@spk/reusable-ui-elements/spk-badges/spk-badges.component';
  
      @Component({
        selector: 'app-badge',
        standalone: true,
        imports: [SpkBadgesComponent],
        templateUrl: './badge.component.html',
        styleUrls: ['./badge.component.scss']
      })
      export class BadgeComponent {
  
      }

Cards :

Ng 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.

HTML
TS

                
   import { Component } from '@angular/core';
   import { SpkMountainsCardComponent } from '../../../@spk/reusable-ui-elements/spk-cards/spk-mountains-card/spk-mountains-card.component';
   
       @Component({
           selector: 'app-cards',
           standalone: true,
           imports: [SpkMountainsCardComponent],
           templateUrl: './cards.component.html',
           styleUrl: './cards.component.scss'
         })
         export class CardsComponent {
   
    }

Breadcrumb :

Ng 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.

HTML
TS

                
 import { Component } from '@angular/core';
 import { SpkBreadcrumbComponent } from '../../../@spk/reusable-ui-elements/spk-breadcrumb/spk-breadcrumb.component';
 
 @Component({
     selector: 'app-breadcrumb',
     standalone: true,
     imports: [SpkBreadcrumbComponent],
     templateUrl: './breadcrumb.component.html',
     styleUrls: ['./breadcrumb.component.scss']
   })
   export class BreadcrumbComponent {
     routerEvents: any[] = [];
     hideHeader: boolean = false;
   
     constructor(private router: Router) {
      this.router.events.subscribe((event: any) => {
         if (event instanceof NavigationEnd) {
           this.routerEvents = event.url.split('/').filter(e => e != '');
         }
       })
     }
                     }

Dropdown :

Ng 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.

HTML
TS

                
     import { Component } from '@angular/core';
     import { SpkDropdownsComponent } from '../../../@spk/reusable-ui-elements/spk-dropdowns/spk-dropdowns.component';
     
     @Component({
         selector: 'app-dropdowns',
         standalone: true,
         imports: [SpkDropdownsComponent],
         templateUrl: './dropdowns.component.html',
         styleUrls: ['./dropdowns.component.scss']
       })
       export class DropdownsComponent {
       
      }

Progress :

Ng 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..

HTML
TS

                
     import { Component } from '@angular/core';
     import { SpkProgressComponent } from '../../../@spk/reusable-ui-elements/spk-progress/spk-progress.component';
     @Component({
       selector: 'app-progress',
       standalone: true,
       imports: [SpkProgressComponent],
       templateUrl: './progress.component.html',
       styleUrls: ['./progress.component.scss']
     })
     export class ProgressComponent {
   
  }

Toast :

Ng 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.

HTML
TS

                
     import { Component } from '@angular/core';
     import { SpkToastComponent } from '../../../@spk/reusable-ui-elements/spk-toast/spk-toast.component';
     @Component({
       selector: 'app-toasts',
       standalone: true,
       imports: [SpkToastComponent],
       templateUrl: './toasts.component.html',
       styleUrls: ['./toasts.component.scss']
     })
     export class ToastsComponent {
   
  }

Type	URL
Plugin Link	https://ng-bootstrap.github.io/#/components/toast/overview

Accordions :

Ng 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.

HTML
TS

                
      import { Component } from '@angular/core';
      import { NgbAccordionComponent } from '../../../@spk/spk-reusable-plugins/ngb-accordion/ngb-accordion.component';
    
      @Component({
          selector: 'app-accordions',
          standalone: true,
          imports: [NgbAccordionComponent],
          schemas:[CUSTOM_ELEMENTS_SCHEMA],
          templateUrl: './accordions.component.html',
          styleUrl: './accordions.component.scss'
        })
        export class AccordionsComponent {
          basicAccordions=[
          { 
            title: 'Accordion Item #1',
            headingId: 'headingOne',
            collapseId: 'collapseOne', 
            collapsed: false
           },
     }

Type	URL
Plugin Link	https://ng-bootstrap.github.io/#/components/accordion/overview

Carousel :

Ng 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.

HTML
TS

        
     import { Component } from '@angular/core';
     import { NgbCarouselComponent } from '../../../@spk/spk-reusable-plugins/ngb-carousel/ngb-carousel.component';
   
     @Component({
         selector: 'app-carousel',
         standalone: true,
         imports: [NgbCarouselComponent],
         templateUrl: './carousel.component.html',
         styleUrl: './carousel.component.scss'
       })
       export class CarouselComponent {
         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

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.

HTML
TS

                
       import { Component } from '@angular/core';
       import { RibbonCardsComponent } from '../../../@spk/ribbon-cards/ribbon-cards.component';
   
       @Component({
         selector: 'app-ribbons',
         standalone: true,
         imports: [RibbonCardsComponent],
         templateUrl: './ribbons.component.html',
         styleUrl: './ribbons.component.scss'
       })
       export class RibbonsComponent {
       
         }