SEB Angular Components

This is a set of angular components some of which are based on SEB's bootstrap. The plan for this project is to increase and improve components for future usage.

The package name: @sebgroup/ng-components
Get started
The package documentation: Documentation
The package sourcecode: Github Source Code
NPM package: @sebgroup/ng-components

Minimum requirements

This version of components has been developed with:

Angular CLI ~10.0.1
Typescript ~3.9.5
SEB Bootstrap ^5.3.0

Installation

You should be able to install the NPM package.

npm install @sebgroup/ng-components@beta --save

This project is based on SEB Bootstrap which includes fonts, colors and variables, to make sure everything works fine, please install these dependencies on your project:

npm install @sebgroup/bootstrap --save

Then make sure you add the Main SEB bootstrap package in your main style.SCSS or index.ts as follows @import '~@sebgroup/bootstrap/scss/bootstrap';.

For Visual Studio Code users, please install the recommended plugins

Development

This project uses prettier for a more consistent (less annoying) coding.

Development: npm start
Check formatting rules, Compile components and Create Docs folder: npm run build
Build and create the Documentation pages only: npm run docs
To run the unit tests, run: npm test
To commit your changes run: npm run commit and follow the steps

Usage

To use a component, you need to import the Module in whichever Module you want to use it. For performance/stability benefits we are not combining all the components into single Index, rather they are chunk into their own sub packages, therefore to use a component, you need to import the Component sub-module from the lib folder, in whichever Class you want to use it. Here is a sample of how to import the Chip component in a page which you can then access by its selector.

import { ChipModule } from "@sebgroup/ng-components/lib/chip";

@NgModule({
      imports: [ChipModule]
})
export class YourModule { }

 <sebng-chip (onClose)="onClose($event)">Chip Text</sebng-chip>

Contact us

For your feedback please contact us via emails below:

For React Users

For all React users, we are hosting the same version of components for React