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:

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

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

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].

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 { }

Modular usage

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:

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 [email protected] at least.

Run examples application

npm install

# This command will show a description for every available npm scripts
npm run info

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:

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