AngularControls

Angular - Controls - Bootstrap

Angular – Bootstrap

Bootstrap is a standardized style sheet that is very popular these days. It presents a standardized look and feel that many applications are using.

ISD coding standards of 2019 includes an aspect of Presentation that says “Use bootstrap, use Jira as a ui standard”.

Bootstrap has one problem – it has JQUERY embedded into it.

One goal for the new technology being produced is to not have any dependencies on JQUERY (since its not exactully current) so this leads to a dilemma. The solution is obvious. We don’t install Bootstrap for our applications, rather we install the angular component called ‘NGX-BOOTSTRAP’. This is a component which brings in the Bootstrap.CSS file, and then has work arounds to the items where bootstrap hooked in jquery. In theory when you install ngx-bootstrap, you are not using JQUERY so no coding violations are being introduced.

Here’s a few things to note.

  • Ngx-bootstrap is Bootstrap minus JQuery plus a few environment specific methodologies.
  • Ngx-bootstrap is poorly documented, use bootstrap to assist on this.
  • Ngx-bootstrap is not a fully implemented standard – so for example there were problems coding the NAVBAR. So far there have been alternative for all the unimplemented things via processes which were also not documented very well.
  • There’s also an NG-Bootstrap – Ignore this, this is tuned for AngularJS, not Angular 2+

Installation

The ngx-bootstrap home page gives 2 methods to install ngx-bootstrap. I did method 1

In the angular project root folder open a command window. Enter the following command

1
Npm install ngx-bootstrap --save

This takes less than a minute to install

Then you need to stitch this component into your project. This is done with the following steps

  • Updating the @ngModule imports section with a reference to TooltipModule (or other mmodules)
  • Adding classes to your page which reference bootstrap
  • Updating Index.html with a reference to bootstrap custom style sheet.

Common Topics

  • [[Bootstrap-Modal]] - Bootstrap modal forms popup over your existing form.

References