@disane/ngx-taskboard
Advanced tools
ngx-taskboard is an implemention of my on taskboard, because all other taskboards are not that what I need. Feel free to contribute or leave some important feedback! Head over to the issues when you have questions or found a bug or leave a PR if you have som additions. Styling is made with Bootstrap, so it's 100% compatible.
npm install @disane/ngx-taskboard
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxTaskboardModule } from '@disane/ngx-taskboard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule, NgxTaskboardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<ngx-taskboard class="w-100 h-100" [items]="items" [hGroupKeys]="hGroupKeys" [vGroupKeys]="vGroupKeys"
[vGroupKey]="vGroupKey" [hGroupKey]="hGroupKey" [sortBy]="sortBy" [invertGroupDirection]="false">
</ngx-taskboard>
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
public items = [
{ id: 1, name: 'Evaluate', color: '#fb3064', status: 'open', user: 'Marco', priority: 1 },
{ id: 2, name: 'Call customer', color: '#71dd8f', status: 'working', user: 'Jamie', priority: 1 },
{ id: 3, name: 'Fix bugs', color: '#29aa82', status: 'open', user: 'Malian', priority: 1 },
{ id: 3, name: 'Create SCSS', color: '#e14a2f', status: 'open', user: 'Marco', priority: 1 },
{ id: 4, name: 'Boil water', color: '#209ab7', status: 'working', user: 'Marco', priority: 2 },
{ id: 4, name: 'Walking the doggo', color: '#b3f7dd', status: 'done', user: 'Thorsten', priority: 3 },
{ id: 4, name: 'Prepare for xmas', color: '#ea6562', status: '', user: '' },
{ id: 4, name: 'Birthday preps', color: '#b4ade5', status: 'test', user: '', priority: 5 }
];
public vGroupKeys = ['open', 'working', 'test', 'done'];
public hGroupKeys = ['Marco', 'Jamie', 'Malian', 'Natalie', 'Thorsten'];
public vGroupKey = 'status';
public hGroupKey = 'user';
public sortBy = 'priority';
}
| Name | Default value | Description | Type |
|---|---|---|---|
| actionsTemplate | null | Template for actions, add and collapse buttons (see examples) | TemplateRef<any> |
| backlogName | 'Backlog' | Name of the backlog row | |
| backlogWidth | ${this.columnWidth}px | Width of the backlog row, when activated. You can use all valid css units. Default is columnWidth | |
| boardName | '' | Board name to show between row and column header | |
| cellAddNewItems | true | Show add buttons in the cells for columns and rows | |
| cellClass | 'card-header' | Default css class for cell header | |
| columnWidth | 200 | Column width (in px) which is applied to the columns when the content is scollable | |
| dragoverPlaceholderTemplate | null | Template for the placeholder element which will be generated when an item is draged over a cell | TemplateRef<any> |
| filter | '' | Predefined filter for the searchbar. If set, the items are filtered by the term on init. | |
| filterOnProperties | [] | Specify the properties which will be searched for the given termin filter. If not properties are given, all will be searched | string[] |
| filterRowPlaceholder | 'Search for items' | Placeholder for the input with the filter row | |
| hAddNewItems | true | Show add buttons on the column headings | |
| hCollapsed | false | Columns are collapsed or not on init | |
| hGroupKey | '' | Key to group data for columns | |
| hGroupKeys | [] | Grouping keys for columns (if not passed, the keys will be determined out of the items)Caution: If you don't pass any headings manually, only the columns are shown, which have data.If you want to show emtpy rows, please set them | (string | GroupHeading)[] |
| hHeaderClass | 'card-header card-header-bg' | Default css class for column header | |
| hHeaderTemplate | null | Template for column headers. Current groupName will be passed (see examples) | TemplateRef<any> |
| initialCollapseState | [] | The collapse state which is applied when set initially | CollapseState[] |
| invertGroupDirection | false | Invert rows and columns | |
| items | [] | ||
| itemTemplate | null | Template for items to render. "item" object ist passed (see examples) | TemplateRef<any> |
| noElementsTemplate | null | Template for collapsed rows to render. "count" object ist passed (see examples) | TemplateRef<any> |
| showBacklog | true | Shows the blacklog on onit | |
| showFilterRow | true | Shows the filter row to search items by filter in filterOnProperties array | |
| showUngroupedInBacklog | true | All items which can't be grouped into rows and columns are stored into the backlog | |
| smallText | false | Decrease overall font size | |
| sortBy | '' | Sort items by property | |
| stickyHorizontalHeaderKeys | true | If set to true, the horizontal group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true | |
| stickyVerticalHeaderKeys | false | If set to true, the vertical group keys are fixed positioned to the top and remain at the top while scrolling. Only applied when scrollable is true | |
| vAddNewItems | true | Show add buttons on the row headings | |
| vCollapsable | true | Allow to collapse the rows | |
| vCollapsed | false | Rows are collapsed or not on init | |
| vGroupKey | '' | Key to group data for rows | |
| vGroupKeys | [] | Grouping keys for rows (if not passed, the keys will be determined out of the items)Caution: If you don't pass any headings manually, only the rows are shown, which have data.If you want to show emtpy rows, please set them | (string | GroupHeading)[] |
| vHeaderClass | 'card-header' | Default css class for row header | |
| vHeaderTemplate | null | Template for row headers. Current groupName will be passed (see examples) | TemplateRef<any> |
| Name | Default value | Description | Type |
|---|---|---|---|
| dragStarted | new EventEmitter<object>() | Fired when the user drags an item. Current item is passed | EventEmitter |
| dropped | new EventEmitter<DropEvent>() | Fired when an item is dropped. Current item is passed | EventEmitter |
| elementCreateClick | new EventEmitter<ClickEvent>() | Fired when an add action is click. Current ClickEvent is passed | EventEmitter |
| headingCollapsed | new EventEmitter<CollapseEvent>() | Fired when a heading is collapsed. CollapseEvent is emitted | EventEmitter |
| isScrolling | new EventEmitter() | EventEmitter | |
| scrolledToEnd | new EventEmitter() | EventEmitter | |
| scrollEnded | new EventEmitter() | EventEmitter |
| Name | Type | Description |
|---|---|---|
| CardItem | interface | Item to render |
| ClickEvent | interface | Datatype which is emitted when an item should be added |
| CollapseEvent | interface | Object for the headings in which you can set color etc. |
| CollapseState | interface | All the collapse stated of every group item (horizontal / vertical) |
| DropEvent | interface | Event which is fired when an item is dropped |
| GroupHeading | interface | Object for the headings in which you can set color etc. |
| GroupKeys | interface | Group keys to determine the correct groups internally |
| Scrollable | interface | Object to determine the scrollability |
| ScrollEvent | interface | Scroll event |
| ScrollState | interface | Scroll state |
git clone https://github.com/Disane87/ngx-taskboard.git .
Installing deps:
npm install
If you use Visual Studio Code, just use the included ngx-taskboard.code-workspace, install recommended extensions and hit F5 to debug.
And now, have some fun! 😊in which you can set color etc. | | CollapseState | interface | All the collapse stated of every group item (horizontal / vertical) | | DropEvent | interface | Event which is fired when an item is dropped | | GroupHeading | interface | Object for the headings in which you can set color etc. | | GroupKeys | interface | Group keys to determine the correct groups internally | | Scrollable | interface | Object to determine the scrollability | | ScrollEvent | interface | |
git clone https://github.com/Disane87/ngx-taskboard.git .
Installing deps:
npm install
If you use Visual Studio Code, just use the included ngx-taskboard.code-workspace, install recommended extensions and hit F5 to debug.
And now, have some fun! 😊
FAQs
Yet another angular taskboard
The npm package @disane/ngx-taskboard receives a total of 55 weekly downloads. As such, @disane/ngx-taskboard popularity was classified as not popular.
We found that @disane/ngx-taskboard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.