@sebgroup/ng-components

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:

• [e-mail]
• [e-mail]
• [e-mail]
• [e-mail]
• [e-mail]

For React Users

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