Playing with Angular and Bootstrap

Reference material

Angular

• Angular Style Guide
• Angular API reference
• Angular source code

Bootstrap

• website
• ng-bootstrap
• ngx-bootstrap

TypeScript

• TypeScript documentation

JavaScript

• JavaScript specifications
• JavaScript documentation
• Google JavaScript style guide

DOM

• The HTML DOM Element Object: list of properties exposed by every HTML element, and lists of element-specific properties

HTML and CSS

• ARIA in HTML
• CSS properties

Tooling

• Angular CLI reference (the Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications)
• The Ultimate Angular CLI Reference Guide
• npm (npm is the package manager for JavaScript)
• A Beginner’s Guide to npm — the Node Package Manager
• nvm (Node Version Manager)

Articles

• Angular 2 Bootstrap DatePicker Tutorial
• Reactive Programming in Angular

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

• some more information about permissions.
• difference between local installation and global installation of a package.

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.