Introduction for Angular Bootstrap Installation and Setup
Software's Required:
1. Node Js. Latest Version (https://nodejs.org/en/download/)
2. Angular setup. Latest version
(As per this blog version used is Angular 6)
3. Visual studio. Latest Version.How to Know Versions After Installation ?
Open Command Prompt and try following command's to know software Version's
1. node -v (For Node Version).2. ng -v (For angular Version). (After Angular is installed).3. npm -v (For NPM version).
How to install and setup Angular Project ?
1. npm install -g @angular/cli (-g indicates global installation)2. npm install @angular/cli (indicates global installation)3. ng new <Project Name> --routing
(Creates Project with routing file).
Example: ng new Portfolio --routing
(Portfolio is my project Name).
How to run angular project
1. cd <Project Name>
(move's inside the project folder created)
Example: cd Portifolio (Move's to the project folder).
2. ng serve
(compiles and run the server with port number 4200 by default).
3. Open any of your favourite browser and type localhost:4200 .
or
Instead of doing 2nd and 3rd steps we can as:
4. ng serve --open (OR) ng serve -o
How to include bootstrap into Angular Project
1. Open command prompt
2. npm install --save @ng-bootstrap/ng-bootstrap
(This install's latest angular bootstrap version).
3. Open Your app.module.ts from the angular project
(Here Portfolio).
4. import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
(import this statement in import section of app module).
5. @NgModule({
imports: [NgbModule],
});
(Imports section add the module as above).
6. Open index.html and paste following link for bootstrap css:
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/
bootstrap.min.css"
integrity=
"sha384-
MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
7. Don't include any JS or Jquery files in ng-bootstrap.