Fix db based login on empty collection

project-manager/src/app/blog/blog-entry/blog-entry.component.html

@@ -7,6 +7,6 @@
         <p> {{entry.text}}</p>
     </div>
     <div class="blog-delete">
-        <button (click)="deleteBlogEntry(entry.id)">delete</button>
+        <button (click)="deleteBlogEntry(entry.id)">Entfernen</button>
     </div>
-</div>
+</div>

project-manager/src/app/blog/blog-entry/blog-entry.component.ts

@@ -4,7 +4,8 @@ import {BlogComponent} from "../blog.component";
 
 @Component({
   selector: 'blog-entry',
-  templateUrl: 'blog-entry.component.html'
+  templateUrl: 'blog-entry.component.html',
+  styleUrls: ['../blog.component.css']
 })
 export class BlogEntryComponent {
   @Input() blogComponent: BlogComponent;

project-manager/src/app/blog/blog.component.css

@@ -3,6 +3,33 @@ body {
   padding-left: 15px;
 }
 
+.blog-entry {
+  width: 125%;
+  border: 1px solid #8c8c8c;
+  padding-bottom: 30px;
+}
+
+.blog-image {
+  width: 30%;
+}
+
+.blog-summary {
+  width: 70%;
+}
+
+img {
+  max-width: 90%;
+  max-height: 100px;
+}
+
+span.title {
+  font-size: x-large;
+}
+
+.clear-fix {
+  clear: both;
+}
+
 .form {
   background-color: #eee;
   width: 580px; /* Breite des Formulars */
@@ -28,38 +55,14 @@ textarea {
   margin-bottom: 1em;
 }
 
-span.title {
-  font-size: x-large;
-}
-
 .clear-fix {
   clear: both;
 }
 
-.blog-entry {
-  width: 600px;
-  display: flex;
-  padding-bottom: 30px;
-}
-
 button {
   float: right;
-  padding-right: 20px;
-}
-
-.blog-image {
-  width: 30%;
-}
-
-img {
-  max-width: 90%;
-  max-height: 100px;
-}
-
-.blog-summary {
-  width: 70%;
 }
 
 textarea {
   height: 7em;
-}
+}

project-manager/src/app/blog/blog.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {ActivatedRoute, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {initialEntries} from './initialEntries';
 import {BlogEntry} from './blog-entry/blog-entry';
@@ -12,13 +12,15 @@ import {BlogEntry} from './blog-entry/blog-entry';
 
 export class BlogComponent {
 
-  entries: BlogEntry[] = [];
+  entries: BlogEntry[];
-  id = 0;
+
+  id: number = 0;
 
   constructor(r: ActivatedRoute, private router: Router, private titleService: Title) {
-    this.entries = [];
     this.entries = initialEntries;
-    this.id = this.entries[this.entries.length-1].id;
+    if (this.entries.length != 0) {
+      this.id = this.entries[this.entries.length-1].id;
+    }
   }
 
   createBlogEntry(title:string, image:string, text:string) {
@@ -35,7 +37,7 @@ export class BlogComponent {
 
   deleteBlogEntry(id:number) {
     let entryIndex = this.entries.findIndex(entry => entry.id === id);
-    if (entryIndex > -1) {
+    if (entryIndex >= 0) {
       this.entries.splice(entryIndex, 1);
     }
   }