simpleng v0.2.1
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 |