Differences
This shows you the differences between two versions of the page.
— |
setup_angular_application [2021/04/05 11:23] (current) |
||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Setup Angular Application ====== | ||
+ | * npm install -g @angular/ | ||
+ | * ng new my-app (also creates the top level directory for the application) | ||
+ | * cd my-app | ||
+ | * ng serve (compiles/ | ||
+ | |||
+ | ===== Installation nb-bootstrap ===== | ||
+ | |||
+ | npm install --save @ng-bootstrap/ | ||
+ | |||
+ | in src/ | ||
+ | |||
+ | import { NgbModule } from ' | ||
+ | | ||
+ | @NgModule({ ... imports: [ ..., NgbModule, ... ] .... }) | ||
+ | |||
+ | ===== Installation bootstrap ===== | ||
+ | |||
+ | npm install --save bootstrap jquery popper.js | ||
+ | |||
+ | in angular.json: | ||
+ | |||
+ | " | ||
+ | |||
+ | ===== 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/ | ||
+ | | ||
+ | npm install ngx-toastr --save | ||
+ | | ||
+ | in angular.json: | ||
+ | |||
+ | " | ||
+ | |||
+ | in app.module.ts: | ||
+ | |||
+ | import { BrowserAnimationsModule } from ' | ||
+ | import { ToastrModule } from ' | ||
+ | |||
+ | imports: [ ... , BrowserAnimationsModule, | ||
+ | |||
+ | in your component: | ||
+ | |||
+ | import { ToastrService } from ' | ||
+ | | ||
+ | // add service via constructor | ||
+ | constructor(private toastr: ToastrService, | ||
+ | | ||
+ | // use | ||
+ | this.toastr.info(" | ||
+ | |||
+ | {{tag> |