simpleng

SimpleNG Library

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