simpleng
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

SimpleNG Library

npm version

SimpleNG is Angular library that contains simple and easy-to-use components. Bootstrap css classes are used in the UI; however, the customization is possible by using component-specific css classes.

Available Components

  • Table
  • Alert

Dependencies

Angular 5+

Install

npm install simpleng --save

Setup

import { SimpleNGModule } from 'simpleng';

@NgModule({
  ...
  imports: [
    ...
    SimpleNGModule,
  ],
})
export class AppModule {}

Global configurations can be provided by importing SimpleNGModule.configure({...})

import { SimpleNGModule } from 'simpleng';

@NgModule({
  ...
  imports: [
    ...
    SimpleNGModule.configure({
      table: {...},
      pagination: {...},
      alert: {...}
    }),
  ],
})
export class AppModule {}

Table

SNGTable is a component that renders html table, with sorting and pagination user interface. Data should be passed manually instead of slicing and sorting them internally.

Usage

<sng-table (pageChange)="loadData($event)">
  <sng-table-column>
    <th *sngTableHeader>ID</th>
    <td *sngTableRow="let row">{{ row.id }}</td>
  </sng-table-column>
  <sng-table-column sort="title">
    <th *sngTableHeader>Title</th>
    <td *sngTableRow="let row">{{ row.title }}</td>
  </sng-table-column>
  <sng-table-column sort="body">
    <th *sngTableHeader>Body</th>
    <td *sngTableRow="let row">{{ row.body }}</td>
  </sng-table-column>
</sng-table>
@ViewChild(SNGTableComponent) table: SNGTableComponent<any>;
...
loadData(page: SNGTablePage) {
  this.dummyService.getPagedDummyData(
    page.pageNumber,
    page.pageSize,
    page.sortProp,
    page.sortDirection
  ).subscribe(pageResponse => {
    this.table.updateByPageResponse(pageResponse);
  });
}

SNGTableComponent instance should be updated after fetching new data. If the response comes as PageResponse object. Table properties can be updated by calling SNGTableComponent.update(data: T[], pageNumber?: number, pageSize?: number, totalRecords?: number). If the response comes as PageResponse object, a shorthand method can be used instead SNGTableComponent.updateByPageResponse(page).

SNGTableComponent.page contains current page properties. Note that Initial table page object is available in the lifecycle hook ngAfterViewInit().

import { AfterViewInit } from '@angular/core';
...
export class AppComponent implements AfterViewInit {
    @ViewChild(SNGTableComponent) table: SNGTableComponent<any>;
		...
    ngAfterViewInit() {
        this.loadData(this.table.page); // Initial load
    }
}

Pagination

Table components will render the pagination by default. It can be disabled by setting pagination="none" attribute to the component.

<sng-table pagination="none">
  ...
</sng-table>

Configurations

SNGTable component instance can be configured individually by passing [config] for table configuration, and [paginationConfig] for pagination configuration.

<sng-table [config]="{...}" [paginationConfig]="{...}">
  ...
</sng-table>

Table Options

Option Type Default Description
responsive boolean true Make the table responsive by adding responsive bootstrap class to the component
style object Object containing several options to style the table
style.tableStyle string default Table style which accepts one of the following values: default, bordered, borderless
style.tableTheme string default Table background color which accepts the following values: default, dark, light
style.headerTheme string default Table header background color which accepts the following values: default, dark, light
style.small boolean false true makes the table compact
style.striped boolean false Striped table rows
style.hover boolean false Highlight a row when hovering

Pagination Options

Option Type Default Description
zeroBased boolean true Page data will start from zero
pageSizes string[] [10, 50, 100, 200] Page size options to allow users picking one of them
visiblePages number 5 Maximum number of pagination buttons that appears to the user
defaultPageSize number 50 Default page size

Alert

SNGAlert makes it easy to show bootstrap alerts with different level using SNGAlertService.

Usage

<sng-alert context="general"></sng-alert>
// Injecting SNGAlertService
constructor(private alertService: SNGAlertService) { }
...
showMessage() {
    // Display success message in 'general' alert
    this.alertService.success('Success message', 'general');
    // Adding visibility timeout to the alert in millis
    this.alertService.warning('Warning message', 'general', 1000);
}
...
clearMessage() {
    this.alertService.clear('general');
}

context is optional. If not provided, the alert service will notify the components with no context. Available levels are success, warning, error, info.

Alerts can be sticky, remains at the top of the viewport, if sticky flag is set to true. Also, more than one alert message can appear at the same time in the same SNGAlertComponent instance by setting multi to true.

<sng-alert [sticky]="true" [multi]="true"></sng-alert>

Alert messages can be mapped to something else by creating a service that implements SNGAlertMessagesMapper and then injecting it with SNG_ALERT_MESSAGES_MAPPER token.

  ...
  providers: [
    { provide: SNG_ALERT_MESSAGES_MAPPER, useClass: AlertLocalizedMessages }
  ]
})
export class AppModule {}

Example of mapper service

@Injectable()
export class AlertLocalizedMessages implements SNGAlertMessagesMapper {

  private translations: any;

  constructor(@Inject(LOCALE_ID) localeId: string) {
    // Load translations
  }

  // Return translated message, for example
  getMessage(message: SNGAlertMessage): string {
    return this.translations[message];
  }

}

Configurations

SNGAlert component can be configured individually by passing [config] for alert configuration.

<sng-alert [config]="{...}"></sng-alert>

Options

Option Type Default Description
dismissable boolean true Adds dismiss button on each alert
animation boolean true Enables show/hide animation
style object Object containing several options to style the table
style.stickyShadow boolean true Activates the shadow when alerts sticks at the top

Package Sidebar

Install

npm i simpleng

Weekly Downloads

0

Version

0.2.1

License

MIT

Unpacked Size

616 kB

Total Files

47

Last publish

Collaborators

  • abdulrahmanalomar