Angular | Working with Angular

Inhaltsverzeichnis

Styling the user interface: Bootstrap
Styling the user interface: Material Design
Installation
- Installation of current/latest version
- Installation of next developer version
Usefull tools and extensions
- Formatting source code
  - Angular + Prettier + Husky

Styling the user interface: Bootstrap

Install Bootstrap

Adding Bootstrap From CDN

Add the following lines into src/index.html

<!doctype html>
<html>
<head>
...
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root>Loading...</app-root>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

Adding Bootstrap via NPM

Another way to add Bootstrap to your Angular project is to install it into your project folder by using NPM.

$ npm install bootstrap jquery popper.js --save

Add the installed files into src/angular.json

...
"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

Check Bootstrap

Add the following lines into src/app/app.components.html

<div class="container">
  <div class="jumbotron">
    <h1>Welcome</h1>
    <h2>Angular & Bootstrap Demo</h2>
  </div>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">
      <h3>{{title}}</h3>
    </div>
  </div>
</div>

Adding Angular Bootstrap Extensions

https://github.com/valor-software/ngx-bootstrap

Use the Angular CLI ng add command for updating your Angular project.

ng add ngx-bootstrap

Or use ng add to add needed component (for example tooltip).

ng add ngx-bootstrap --component tooltip

Add component to your page:

<button type="button" class="btn btn-primary"
        tooltip="This is a Bootstrap Button created with ngx-bootstrap.">
  Simple demo
</button>

Styling the user interface: Material Design

Install

$ ng add @angular/material

Install ‘hammer.js’

HammerJS can be installed using the following npm command:

   npm install --save hammerjs

After installing, import it on your app’s entry point (e.g. src/main.ts).

 import 'hammerjs';

Adding

Checking

Add Material Design Components

Installation

Installation of current/latest version

$ npm install -g @angular/cli

$ npm -g install @angular/cli@latest

Installation of next developer version

$ npm -g install @angular/cli@next

Usefull tools and extensions

Formatting source code

Angular + Prettier + Husky

Read this great tutorial.