Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ngx-board

Package Overview
Dependencies
Maintainers
1
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-board

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.0.

  • 0.2.3
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

ngx-board

A customizable Kanban-style board component built with Angular.

Description

The ng80-board component provides a Kanban-style board that allows users to move cards between columns and reorder columns. The component uses the Angular CDK's drag and drop functionality to handle the card and column moves.

Installation

To use the ng80-board component in your project, you need to install the @80ymedia/ng80-board package by running the following command in your project's root directory:

npm install ngx-board

After installing the package, you need to import the BoardModule in your app's module:

import { BoardModule } from 'ngx-board';

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

Usage

To use the ng80-board component in your template, add the ng80-board tag:

<ng80-board 
	[board]="board"
  	(onCardMoved)="onCardMoved($event)"
  	(onCardClick)="onCardClick($event)"
    (onColumnMoved)="onColumnMoved($event)"
></ng80-board>

Where board is an object that conforms to the Board interface.

interface Board<T = any> {
  title: string;
  columns: Array<BoardColumn<T>>;
}
interface BoardColumn<T = any> {
  title: string;
  cards: Array<BoardCard<T>>;
}
interface BoardCard<T = any> {

Inputs

InputDescription
board (required)an instance of Board that defines the structure of the board

Outputs

OutputDescription
onCardMovedemitted when a card is moved within or between columns on the board
onColumnMovedemitted when a column is moved on the board.
onCardClickemitted when a card is clicked.

Customization

The ng80-board component allows for customization of the card, column header, and column footer templates through the use of content projection.

To use a custom card template, create a ng-template element with the directive cardTemplate and place it within the ng80-board element. The content within this template will be used as the template for each card.

<ng80-board [board]="board">
  <ng-template cardTemplate>
    <div class="custom-card-template">
      <h2>{{card.title}}</h2>
      <p>{{card.description}}</p>
    </div>
  </ng-template>
</ng80-board>

Similarly, custom templates for the column header and footer can be defined using the boardColumnHeader and boardColumnFooter directives respectively.

<ng80-board [board]="board">
  <ng-template cardTpt let-item="item">
    <div class="custom-card-template">
      <h2>{{card.title}}</h2>
      <p>{{card.description}}</p>
    </div>
  </ng-template>
  <ng-template columnHeaderTpt let-column="column">
    <div class="custom-column-header">
      <h3>{{column.title}}</h3>
    </div>
  </ng-template>
  <ng-template columnFooterTpt let-column="column">
    <div class="custom-column-footer">
      <button>Add Card</button>
    </div>
  </ng-template>
</ng80-board>

Support

If you find this library helpful and want to support its development, consider buying me a coffee. Thank you for your support!

About the author

Carlos Morcillo is a web developer and open source contributor. You can find more of his work on this website.

Keywords

FAQs

Package last updated on 07 Jul 2023

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc