Notes about angular theme style

1. Can default npm bootstrap package work with angular project?
The default npm package published by https://getbootstrap.com/ can be installed by

npm install bootstrap

Or skip the npm installation and directly include the css style and javascript file in the html file as 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script

The default npm package's package.json shows it depends on jquery library. The jQuery depended by  default bootstrap implementation has conflict with angular, as jquery is not compatible with angular project due to the different way to render the DOM element.

So default bootstrap npm package cannot be used by angular project directly. 


If the angular project only needs the bootstrap css style without jQuery dependency, then the angular project can just include the bootstrap in its css style, and the function works as expected. 


But if the angular project depends on bootstrap's javascript dependency, then it will need to use third party library to support bootstrap without jQuery's dependency, such as ngx-bootstrap.


2. What bootstrap components requires javascript library?
Please see https://getbootstrap.com/docs/4.0/getting-started/introduction/ for bootstrap components that requires javascript dependency, they include
  Alerts for dismissing
  Buttons for toggling states and checkbox/radio functionality
  Carousel for all slide behaviors, controls, and indicators
  Collapse for toggling visibility of content
  Dropdowns for displaying and positioning (also requires Popper.js)
  Modals for displaying, positioning, and scroll behavior
  Navbar for extending our Collapse plugin to implement responsive behavior
  Tooltips and popovers for displaying and positioning (also requires Popper.js)
  Scrollspy for scroll behavior and navigation updates


3. what is ng-bootstrap and ngx-bootstrap npm package?
ng-bootstrap and ngx-bootstrap npm package were created to use bootstrap function in angular project without depending on jQuery.
ngx-bootstrap is a new version of ng-bootstrap, so it should be used in the new angular project.
As ngx-bootstrap only replaces default bootstrap package's jquery part with its own javascipt library, so ngx-bootstrap still uses the same css style definition bt default bootstrap library. 


That is why when using ngx-bootstrap package, the CND for the css style file link is same as default bootstrap css CDN link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
as show in https://valor-software.com/ngx-bootstrap/#/documentation#getting-started 

4. Careful about bootstrop css version

When using bootstrap css style in angular project to render html elements, it is important to match the element style settings with the matched bootstrap versions. As different major version of bootstrap requires different style settings. The angular project will not render properly when using 4.x.x css style with 3.x.x html element settings.

5. Difference between bootstrap and material for angular library
Both bootstrap and material for angular are css styles for html ui component, and both of them can be used for angular project. 
Bootstrap is developed by Twitter, and has a bigger user base. 
Material for angular is developed by angular team and is better integrated with angular project. Bootstrap and Material for angular can be used in the same angular project.