Angular | Working with Angular

Styling the user interface: Bootstrap

Install Bootstrap

Adding Bootstrap From CDN

Add the following lines into src/index.html

<!doctype html>
  <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  <script src="" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

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": [
  "scripts": [

Check Bootstrap

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

<div class="container">
  <div class="jumbotron">
    <h2>Angular & Bootstrap Demo</h2>
  <div class="panel panel-primary">
    <div class="panel-heading">Status</div>
    <div class="panel-body">

Adding Angular Bootstrap Extensions

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

Styling the user interface: Material Design


$ 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';



Add Material Design Components


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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

de German