Setup Angular Application

  • npm install -g @angular/cli
  • ng new my-app (also creates the top level directory for the application)
  • cd my-app
  • ng serve (compiles/transpiles code and starts the local web server, see http://localhost:4200)

Installation nb-bootstrap

  npm install --save @ng-bootstrap/ng-bootstrap

in src/app/app.module.ts:

  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({ ... imports: [ ..., NgbModule, ... ] .... })

Installation bootstrap

  npm install --save bootstrap jquery popper.js

in angular.json:

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

Installation fontawesome

There are different ways to get fontawesome into the project. One way is to directly add the url to CDN for fontawesome in index.html.

Installation ngx-toastr

  npm install @angular/animations --save
  
  npm install ngx-toastr --save
  

in angular.json:

  "styles" : [ ... , "node_modules/ngx-toastr/toastr.css", ... ]

in app.module.ts:

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { ToastrModule } from 'ngx-toastr';
  imports: [ ... , BrowserAnimationsModule, ToastrModule.forRoot(), ... ]

in your component:

  import { ToastrService } from 'ngx-toastr';
  
  // add service via constructor
  constructor(private toastr: ToastrService, ...) { ... }
  
  // use
  this.toastr.info("Hello!");