1. Create a new angular2-dart app: https://angular.io/docs/dart/latest/quickstart.html
2. Add ng_bootstrap to pubspect.yaml:
dependencies:
...
ng_bootstrap: any
...3. Add css stylesheet link to index.html:
<head>
...
<link rel="stylesheet" href="https://github.com/dart-league/ng_bootstrap/blob/master/packages/ng_bootstrap/all.css">
...
</head>4. Add needed ng_bootstrap directives to your components:
import 'package:ng_bootstrap/ng_bootstrap.dart';
@Component(
// ...
directives: const [bsDirectives])To customize default styles to create custom themes based on ng_bootstrap theme,
the best option is to create an scss file that imports the package:ng_bootstrap/all.scss
file, for example:
// variables should be set before importing default theme
$brand-primary: red !important;
// you could also import a custom variables theme if you prefer
// but it should be done before importing default theme
@import 'path/to/_my-variables';
@import 'package:ng_bootstrap/all';Then in your index.html file change the link tag to point to the new theme.
<head>
...
<link rel="stylesheet" href="https://github.com/dart-league/ng_bootstrap/blob/master/path/to/my-theme.css">
...
</head>