UI Library for use with Angular 2. With this library you can create highly customisable page quickly.
npm install @cloud-creatures/cc-angular-uiUI Library for use with Angular 2. With this library you can create highly customisable page quickly.
This UI Library has Angular Material Dependencies and also Angular Server Data Dependency. First install Angular Server Data:
``
npm i @cloud-creatures/angular-server-data
and then install CC Angular UI:
`
npm i @cloud-creatures/cc-angular-ui
This library is composed of 4 main components:
- CC Material Layout
- CC Material Page Header
- CC Material Datatable
- CC Form UI
Import CcMaterialLayoutModule and add it into your module imports:
`
import { CcMaterialLayoutModule } from '@cloud-creatures/cc-angular-ui/cc-material-layout';
`
cc-sidenav-item is expected to be inside the *ccSidenav directive:
...
Menu Header
Menu 1
Menu 2
Nested 1
Menu 1
Nested 2
Menu 1
Menu 2
...
$3
#### cc-main-layout
| Name | Type | Description |
|--------------|-----------------------|------------------------------------------------------------------------------------|
| sideTitle | string or TemplateRef | Title for header section of the SideNav |
| title | string or TemplateRef | Title for the main Top Navigation Bar |
| menuIcon | string | Icon for the Hamburger Button that opens the Sidenav, pass in material icon values |
| sidenavWidth | number | Width of the SideNav menu. |
$3
| Name | Type | Description |
|----------------|-----------------------|---------------------------------------------------------------------------------|
| isExternalLink | boolean | Set to true if the link points to external pages. |
| icon | string or TemplateRef | Material Icon value or custom template ref |
| link | string | Internal router link |
| target | string | pass in target _blank to open in new tab |
| exact | boolean | set to true for Route exact link |
| pageTitle | string | This value is going to be displayed on top bar if this item is currently active |
| header | | add this attribute to set the item as a header item |
| expanded | | add this attribute to by default expand header items or items with child navs |CC Material Page Header
$3
Import CcMaterialPageHeaderModule and add it into your module imports:
import { CcMaterialPageHeaderModule } from '@cloud-creatures/cc-angular-ui/cc-material-page-header';
$3
Home
Examples
$3
#### cc-page-header
| Name | Type | Description |
|---------------|-----------------------|---------------------------------------------|
| title | string or TemplateRef | Title section of the header |
| subTitle | string or TemplateRef | Subtitle section of the header |
| backgroundUrl | string | URL for background image of the page header |
#### cc-breadcrumb-item
| Name | Type | Description |
|-------------------|---------|-------------------------------------------------------------------|
| link | string | Router link |
| usePreviousParams | boolean | set this attribute to preserve previous page's params to the link |
CC Material Datatable
The Datatable is made to work with data that is fetched and paginated from the server. All you have to do
is to pass the serverData function that fetches the data from the server based on the queries, and return the
data as observable.
$3
Import CcMaterialDatatableModule and add it into your module imports:
import { CcMaterialDatatableModule } from '@cloud-creatures/cc-angular-ui/cc-material-datatable';
$3
$3
It is important to note that the server data function MUST be defined with the fat arrow syntax for correct "this" scope
serverDataFn = (query: any) => {
// query passed in is the search text, paginations and also all the query data from the plugins return of({
data: [ ... ] , // this is the actual data array that will be passed in as the datasource
extra: {
length: 10 // extra.length is the total item for the query that is important for the pagination to work
}
})
}
the query object passed into the server data function contains the search text, paginations, sort, and all other data from datatable plugins.
query.search // search text
query.pagination = {
page: 0, // current page number, starting from 0,
size: 10, // item per-page
}
$3
The datatable uses Angular Material table component internally. The column
definitions also follow the exact same way (described here) with a few extra attributes and directives added.
Name
{{element.name}}
Description
{{element.description}}
Address
{{element.address}}
$3
#### cc-datatable-sortable
add cc-datatable-sortable directive to *matHeaderCellDef as per Column Definitions to enable header click sorting.
...
Name
...
When sorting is active it will be passed into the Server Data Function via the query parameter:
query.sort = {
sort: string, // the sorted column name
direction: 'asc' | 'desc' // the direction of the sort
}
#### Column visibility (Colvis)
Colvis plugin will add a colvis button on the table toolbar that enable user to hide and show the columns.
add hideable and colvisLabel attribute to matColumnDef definition as per Column Definitions:
... column definition
add ccDatatableColvis plugin to the datatable:
...
...
...
#### Search By
Search By plugin will add a dropdown of searchable items beside the search bar.
add ccDatatableSearchBy plugin to the datatable:
...
Name
Address
Email
...
...
ccDatatableSearchBy parameter:
- multiple: boolean
add this attribute to ccDatatableSearchBy directive to set whether the selection is multiple or single selection
// single selection
`this plugin when active will add following data to the query object passed into server data function:
query.searchBy
the value will be an array of the searchByItem defined name e.g. ["name", "email"]. for single selection it will
still be array but contain only 1 item.#### Filter
Filter plugin will add a filter dropdown on datatable toolbar. You can then add any filter you want and use the passed in
handleChange function to update the datatable
everytime the handleChange function is called with the passed in filter params, it will update the datatable and passed in the
filter data in the query data parameter in server data function
query.filter// e.g:
query.filter.testFilterItem // this will be passed if the testFilterItem example above input ngModel value is changed
#### Filter Chips
This plugin is to be used in conjuction with the filter plugin above.
...
{{key}} : {{value}}
...
...
whenever a filter value is added to datatable it will show up on the toolbar as a chip that user can un-apply one by one.
if no *ccDatatableFilterChipsItem component is added, it will generate with default value and look.
// this also works, it will be default with the text: :
#### Sort By
This plugin will add a "Sort By" button on the datatable toolbar that contains listed sortable items. if the item in the list also
exists in the column definition, it will also update the header click sort and vice versa.
...
Name
Address
Email
...
...
this plugin when active will add following data to the query object passed into server data function:
query.sort = {
sort: string, // the sorted column name
direction: 'asc' | 'desc' // the direction of the sort
}
#### Tab
This plugin will add tabs to the datatable
...
Tab 1
Tab 2
Tab 3
...
...
ccDatatableTab parameter:
- position: 'top' | 'above-table' | 'left' | 'right'
default to above-table, this parameter will determine where the tab will be displayed
`
top will display the tabs above the toolbar, left & right will be left or right inside the toolbar,
while above-table will be under the toolbar above the actual table.this plugin when active will add following data to the query object passed into server data function:
query.tab
the value will be the selected tab name defined in the *ccDatatableTabItem. e.g "tab2".$3
| Name | Type | Description |
|---------------------|--------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|
| serverData | function | The main function that will be called whenever the datatable need to reload and fetch new data. |
| search | boolean | set to false if you want to hide search bar. true by default. |
| autoSearch | boolean | true by default. if set to false it will not auto search, a search button will be display instead |
| searchDelay | number | if autosearch is on, this attribute determine time in milliseconds before start searching after user typed in search bar. |
| searchWidth | number \| string | if number: width of search bar in pixel, otherwise passed in as string e.g. '250px' |
| searchButtonLabel | string | Set the label of the search button if autoSearch is false |
| searchInputStyle | 'default' \| 'outlined' | if value is outlined, it will show border around search input. |
| searchPlaceholder | string | Set the placeholder of the search bar input. |
| searchPosition | 'left' \| 'right' | Set the position of the search bar on the toolbar. |
| pageSizeOptions | [number] | array of number determining the value of the number of item per-page drop-down selection. |
| defaultPageSize | [number] | set the default page size of the pagination |
| type | "full-page" \| "contained" | full page is default, contained if the datatable will be displayed e.g. inside a popup or another component. |
| stickyToolbar | boolean | default to true, set false to disable sticky |
| toolbarStickyOffset | number | set the value of the sticky offset from the top of the screen for the sticky toolbar |
| displayColumn | [string] | array of column names that determine which column will be displayed regardless of the colvis setting. use this to control column display. |
| paginationPosition | 'left' \| 'right' | set the position of the pagination control on the table footer |
| pagination | 'none' \| 'server' \| 'client' | either disable pagination, or user either server or client pagination. Client side pagination will not call serverDataFn to refresh. (default to server) |
| (rowClicked) | Output | Event emitted when a row is clicked, passed in the row data as $event |
| hoverable | boolean | add this attribute in conjuction with rowClicked attr above for clickable row. |
| useRouteParams | boolean | if set to true, the datatable will modify the url parameters to persist the query object between refresh. useful for bookmarking. |
| pluginPosition | 'left' \| 'right' | Set the position of the plugins button on the toolbar. |CC Form UI
$3
Import CcFormUIModule and add it into your module imports:
import { CcFormUIModule } from '@cloud-creatures/cc-angular-ui/cc-form-ui';
$3
Work In Progress