Table of contents

- Usage
- Development
* Run examples application
* Build and publish updates

Usage

AngularUI is based on Bootstrap 4 and other vendor CSS. You must import the uikit-vendor.css file located in /dist/uikit-vendor.css.

For example with angular-cli add the following line to angular-cli.json:

``json
"styles": [
"../node_modules/@bdi/bdi-ui/dist/uikit-vendor.css"
]
`

Or if you use Webpack add the following line to your index.ts:

`javascript
require('@bdi/bdi-ui/dist/uikit-vendor.css');
`

To use AngularUI components, please import it to the application’s module by specifying AngularUIModule.forRoot() at import parameter of @NgModule. AngularUI components will not render properly if AngularUIModule is not loaded.

AngularUIModule.forRoot() must be called only once in your application. Other NgModules in the application have to import only imports: [AngularUIModule].


`diff
import { BrowserModule } from '@angular/platform-browser';
import { NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
+ import { AngularUIModule } from 'angular-ui';

@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
+ AngularUIModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

`

$3

You can also import only used NgModules in your application, instead of full AngularUIModule, making the bundle size much smaller because only used modules will be included in the final bundle.
For instance, if you use only the BtnComponent, AccordionComponent and TabviewComponent you can do this in your app NgModule:

`typescript
import { BDIBtnModule } from '@bdi/bdi-ui/dist/btn/btn.module';
import { BDIAccordionModule } from '@bdi/bdi-ui/dist/accordion/accordion.module';
import { BDITabViewModule } from '@bdi/bdi-ui/dist/tab-view/tab-view.module';

@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
BDIBtnModule.forRoot(),
BDIAccordionModule.forRoot(),
BDITabViewModule.forRoot()
]
})
export class AppModule { }
`

This usage does not dependend on tree-shaking and you can use the latter
for even smaller bundles.

---

Development

Development of the UIKit requires npm@3 and node@6.7.0 at least.

Run examples application

`bash
npm install

This command will show a description for every available npm scripts

npm start # This will just run the development server
`

An application with playground examples for AngularUI components will be available at http://localhost:3001/.

More info for development can be found at Guides.

---

Build and publish updates

Go to root folder:

`bash
npm version patch # Choose between major/minor/patch. Will also create a new git tag.
npm publish # The build script will be automatically ran before publishing
git push # Push the commits with the new version
git push --tags # Push the new git tag to the server
``