added toastr

.angular-cli.json

@@ -21,6 +21,7 @@
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "../node_modules/font-awesome/css/font-awesome.css",
+        "../node_modules/ngx-toastr/toastr.css",
         "styles.css"
       ],
       "scripts": [

package.json

@@ -27,6 +27,7 @@
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "jquery": "^3.2.1",
+    "ngx-toastr": "^6.5.0",
     "popper.js": "^1.12.6",
     "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"

src/app/app.module.ts

@@ -2,6 +2,9 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ToastrModule } from 'ngx-toastr';
+
 
 import { AppComponent } from './app.component';
 import { routes } from './app.routes';
@@ -14,7 +17,9 @@ import { PagesModule } from './pages/pages.module';
     AppComponent
   ],
   imports: [
-    NgbModule.forRoot(),    
+    NgbModule.forRoot(),
+    BrowserAnimationsModule,
+    ToastrModule.forRoot(),
     BrowserModule,
     SharedModule,
     PagesModule,

src/app/pages/blogAdmin/blogAdmin.component.html

@@ -31,7 +31,7 @@ <h6>{{post.title2}}</h6>
             </div>
         </div>
         <div class="col-md-2">
-            <p>Published: {{post.publishedDate | date:'shortDate'}}</p><!--TODO:make date format pipe 10.2.2017-->
+            <p>Published: {{post.publishedDate | date:'shortDate'}}</p>
         </div>
     </div>
 </div>

src/app/pages/blogAdmin/blogAdmin.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CrudService } from '../../shared/services/crud.service';
 import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
     selector: 'blog-admin-page',
@@ -9,13 +10,13 @@ import { Router } from '@angular/router';
 
 export class BlogAdminComponent implements OnInit {
     posts:Blog[];
-    constructor(private crudService:CrudService, private router:Router) { }
+    constructor(private crudService:CrudService, private router:Router, private toastr:ToastrService) { }
 
     ngOnInit() { 
         this.crudService.readAll('blogPosts').subscribe((resp)=>{
             this.posts = resp;
         },(error)=>{
-            console.error("Toast burnt!");//TODO:add toastr            
+            this.toastr.error("Failed to retrieve blog posts!");          
         });
     }
     public createNewPost(){
@@ -26,14 +27,14 @@ export class BlogAdminComponent implements OnInit {
     };
     public deletePost(id:number){
         this.crudService.delete('blogPosts',id).subscribe((resp)=>{
-            console.log("Toast popped!");//TODO:add toastr
+            this.toastr.success('Successfully deleted blog post.');
             this.crudService.readAll('blogPosts').subscribe((resp)=>{
                 this.posts = resp;
             },(error)=>{
-                console.error("Toast burnt!");//TODO:add toastr            
+                this.toastr.error("Failed to retrieve blog posts!");                          
             });
         },(error)=>{
-            console.error("Toast burnt!");//TODO:add toastr
+            this.toastr.error("Failed to delete blog post!");                          
         });
     };
 }

src/app/pages/blogEdit/blogEdit.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { CrudService } from '../../shared/services/crud.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
     selector: 'blog-edit-page',
@@ -19,7 +20,8 @@ export class BlogEditComponent implements OnInit {
         continueReadingLink:'',
         publishedDate: undefined
     };
-    constructor(private route: ActivatedRoute, private router:Router, private blogService: CrudService) { };
+    constructor(private route: ActivatedRoute, private router:Router, 
+        private toastr:ToastrService,private blogService: CrudService) { };
 
     ngOnInit() {
         this.route.params.subscribe((params) => {
@@ -29,7 +31,7 @@ export class BlogEditComponent implements OnInit {
                 this.blogService.read('blogPosts', id).subscribe((resp) => {
                     this.post = <Blog>resp[0];
                 }, (error) => {
-                    console.error("Toast burnt!");//TODO:add toastr                            
+                    this.toastr.error("Failed to load blog post!");                            
                 });
             }
         });
@@ -38,28 +40,29 @@ export class BlogEditComponent implements OnInit {
         if (this.isNewPost) {
             this.post.publishedDate = new Date();
             this.blogService.create('blogPosts', this.post).subscribe((resp) => {
-                console.error("Toast yum!");//TODO:add toastr    
+                this.toastr.success("Successfully saved blog post.");                                           
                 this.isNewPost = false;
-                this.post._id = resp._id;
-                //TODO:change the route                        
+                this.post._id = resp[0];
+                const newRoute = 'blogadmin/' + this.post._id;
+                this.router.navigate([newRoute]);           
             }, (error) => {
-                console.error("Toast burnt!");//TODO:add toastr                                            
+                this.toastr.error("Failed to save blog post!");                                           
             });
         }
         else {
             this.blogService.update('blogPosts', this.post._id, this.post).subscribe((resp) => {
-                console.error("Toast yum!");//TODO:add toastr                                            
+                this.toastr.success("Successfully updated blog post.");                                           
             }, (error) => {
-                console.error("Toast burnt!");//TODO:add toastr                                            
+                this.toastr.error("Failed to update blog post!");                                           
             });
         }
     }
     public deletePost(){
         this.blogService.delete('blogPosts', this.post._id).subscribe((resp) => {
-            console.error("Toast yum!");//TODO:add toastr
+            this.toastr.success("Successfully deleted blog post.");                                           
             this.router.navigateByUrl('/blogadmin');                                          
         }, (error) => {
-            console.error("Toast burnt!");//TODO:add toastr                                            
+            this.toastr.error("Failed to delete blog post!");                                           
         });
     }
 }