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

This version of components has been developed with:

• Angular CLI ~10.0.1
• Typescript ~3.9.5
• SEB Bootstrap ^5.3.0

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

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

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

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>

For your feedback please contact us via emails below:

1. [email protected]
2. [email protected]
3. [email protected]

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