Differences

This shows you the differences between two versions of the page.

--- setup_angular_application [2018/10/31 15:36]
+++ setup_angular_application [2021/04/05 11:23] (current)
@@ Line 1: / Line 1: @@
+====== 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!");
+{{tag>devel angular}}