## Installation

Fork our Webpack Quickstart! https://github.com/coryshaw1/ng2-play/
Fork our angular-cli Quickstart! https://github.com/FuelInteractive/fuel-ui-cli-quickstart/

<accordion>
Webpack

If you would like to add Fuel-UI to your Angular2 Webpack project through npm manually, do the following:

    npm install fuel-ui --save

You then need to make sure you add references to the following:

- Bootstrap 4
- Font Awesome
- Fuel-UI CSS Bundle (for Tooltips and CodeHighlighter, will be in `node_modules/fuel-ui/bundles/fuel-ui.css`)

There are different ways of doing adding these. In our Github project, we use Webpack loaders to achieve this where we can (see bootstrap-loader and font-awesome-webpack). You may also just simply add the vendor CSS files to the head. You do not need the javascript for these

Then simply add the proper module(s) to your base component

    import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';

    @NgModule({{'{'}}
      bootstrap: [ YourBaseComponent ],
      declarations: [ YourBaseComponent, ... ],
      imports: [ FuelUiModule, ... ],
      providers: [ ... ]
    {{'}'}})

`FuelUiModule` will add access to every Fuel-UI module to your project. If you wish to minimize the amount of imports, you can also mix and match the following modules:

    import {{'{'}}
      FuiAnimationsModule,  //All animations
      FuiComponentsModule,  //All components
      FuiDirectivesModule,  //All directives
      FuiPipesModule //All pipes
    {{'}'}} from 'fuel-ui';

    @NgModule({{'{'}}
      bootstrap: [ YourBaseComponent ],
      declarations: [ YourBaseComponent, ... ],
      imports: [ FuiAnimationsModule, FuiComponentsModule, FuiDirectivesModule, FuiPipesModule, ... ],
      providers: [ ... ]
    {{'}'}})

To make your imports even more modular, every demo page will have the Fuel-UI component/directive/etc's module. This way you'll be able to import even less. `FuiDatePickerModule` for example.

angular-cli

    ng new example-project
    cd example-project
    npm install fuel-ui font-awesome bootstrap@4.0.0-alpha.5 --save

Go to your `angular-cli.json` file, and add the following to your `styles` array:

    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "../node_modules/fuel-ui/bundles/fuel-ui.css"

Next, still within your `angular-cli.json` file, add the following to your `addons` array:

    "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

Now build the project to copy over the necessary files

    ng build

Then simply add the proper module(s) to your base component

    import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';

    @NgModule({{'{'}}
      bootstrap: [ YourBaseComponent ],
      declarations: [ YourBaseComponent, ... ],
      imports: [ FuelUiModule, ... ],
      providers: [ ... ]
    {{'}'}})

SystemJs

    npm install fuel-ui --save

Go to your SystemJs config file, and add the following to your `map` array:

    "moment": "node_modules/moment/moment.js",
    "fuel-ui": "node_modules/fuel-ui/bundles/fuel-ui.umd.js",

Then the proper link tags to your `index.html`'s `<head>`

    <head>
        <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
        <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="node_modules/fuel-ui/bundles/fuel-ui.css" />
    </head>

Then simply add the proper module(s) to your base component

    import {{'{'}} FuelUiModule {{'}'}} from 'fuel-ui';

    @NgModule({{'{'}}
      bootstrap: [ YourBaseComponent ],
      declarations: [ YourBaseComponent, ... ],
      imports: [ FuelUiModule, ... ],
      providers: [ ... ]
    {{'}'}})

</accordion>