You are here

Playing with Angular and Bootstrap

logoReference material

Angular

Bootstrap

TypeScript

JavaScript

DOM

HTML and CSS

Tooling

Articles

Installation

Angular needs Node.js and npm. npm is a package manager for JavaScript. It is delivered with Node.js. npm is a separate project from Node.js and updates more frequently.

Node.js is available in an LTS (long term support) version (currently v6.11.0) and in a current version with latest features (v8.1.2).

My development machine runs Linux Mint 18.1 (a distribution based on Ubuntu Xenial). I install Node.js using nvm (Node Version Manager) so that I don't have to install Node with root permission, according to nvm documentation:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
source .bashrc
nvm install node

To check installation results:

  • node -v displays v8.1.2
  • npm -v displays 5.0.3

Then, I install Angular CLI, according to Angular documentation:

npm install -g @angular/cli

To check installation results:

  • ng -v displays version 1.1.3 for Angular CLI and version 4.2.4 for Angular.

Additional links

First project

I create the directory that will contain my first test project, generate the project and run it:

mkdir angular
cd angular
ng new my-app
cd my-app
ng serve --open

My default browser opens a new window, which displays a greeting message.

IntelliJ IDEA and Angular

I configure my IntelliJ IDEA (Ultimate edition) according to JetBrains documentation:

  • installation of NodeJS and Angular plugins
  • set JavaScript version to ECMAScript 6, to prevent the Destructuring assignments are not supported by current JavaScript version error message from being displayed
  • I stop the Angular application started above (CTRL+C)
  • I open the above project, open a terminal window and enter the command ng serve
  • the application is available at http://localhost:4200, as above

First Bootstrap project

Bootstrap and ng-bootstrap installation

Following steps are to be followed in the above test project context.

  • install bootstrap and ng-bootstrap:
npm install bootstrap@4.0.0-alpha.6 ng-bootstrap --save

Let's add a button to the my-app project. This can be done as follows:

  • add the line below to the styles section of .angular-cli.json:
"../node_modules/bootstrap/dist/css/bootstrap.css"
  • add following lines to app.module.ts imports:
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  • and add following lines to the imports section of @NgModule:
ButtonsModule.forRoot(),
FormsModule
  • add this line to AppComponent class definition in app.component.ts:
model = 1;
  • add this block to app.component.html:
  <div [(ngModel)]="model" ngbRadioGroup name="radioBasic">
<label class="btn btn-primary">
<input type="radio" [value]="1"> Left (pre-checked)
</label>
<label class="btn btn-primary">
<input type="radio" value="middle"> Middle
</label>
<label class="btn btn-primary">
<input type="radio" [value]="false"> Right
</label>
</div>
<hr>
<pre>{{model}}</pre>

That's it.