Add delete for blog entries

blog-complete/app/blog/app.component.html

@@ -1,5 +1,5 @@
 <h1>Mein Angular-Blog</h1>
-<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
+<app-blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></app-blog-entry>
 <h2>Neuen Blog-Eintrag erstellen</h2>
 
 <div class="form">

blog-complete/app/blog/app.component.ts

@@ -7,9 +7,11 @@ import {BlogEntry} from './blog-entry';
   selector: 'app-root',
   templateUrl: 'app.component.html'
 })
+
 export class AppComponent {
 
   entries: BlogEntry[] = [];
+  id = 2;
 
   constructor() {
     this.entries = [];
@@ -17,13 +19,23 @@ export class AppComponent {
   }
 
   createBlogEntry(title:string, image:string, text:string) {
-    console.log(title, image, text);
+    this.id++;
+    console.log(this.id, title, image, text);
     let entry = new BlogEntry();
+    entry.id = this.id;
     entry.title = title;
     entry.image = image;
     entry.text = text;
 
     this.entries.push(entry);
   }
+
+  deleteBlogEntry(id:number) {
+    let entryIndex = this.entries.findIndex(entry => entry.id === id);
+    if (entryIndex > -1) {
+      this.entries.splice(entryIndex, 1);
+    }
+  }
+
 }
 

blog-complete/app/blog/blog-entry.component.html

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

blog-complete/app/blog/blog-entry.component.ts

@@ -1,5 +1,6 @@
 import {Component, Input} from '@angular/core';
 import {BlogEntry} from './blog-entry';
+import {AppComponent} from "./app.component";
 
 @Component({
   moduleId: module.id,
@@ -7,5 +8,11 @@ import {BlogEntry} from './blog-entry';
   templateUrl: 'blog-entry.component.html'
 })
 export class BlogEntryComponent {
+  @Input() blogComponent: AppComponent;
   @Input() entry: BlogEntry;
+
+  deleteBlogEntry(id:number) {
+    this.blogComponent.deleteBlogEntry(id);
+  }
+
 }

blog-complete/app/blog/blog-entry.ts

@@ -1,4 +1,5 @@
 export class BlogEntry {
+  id :number;
   title: string;
   text: string;
   image: string;

blog-complete/dist/blog/app.component.html

@@ -1,5 +1,5 @@
 <h1>Mein Angular-Blog</h1>
-<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
+<app-blog-entry *ngFor="let entry of entries" [entry]="entry" [blogComponent]="this"></app-blog-entry>
 <h2>Neuen Blog-Eintrag erstellen</h2>
 
 <div class="form">

blog-complete/dist/blog/app.component.js

@@ -15,17 +15,26 @@ var blog_entry_1 = require("./blog-entry");
 var AppComponent = (function () {
     function AppComponent() {
         this.entries = [];
+        this.id = 2;
         this.entries = [];
         this.entries = initialEntries_1.initialEntries;
     }
     AppComponent.prototype.createBlogEntry = function (title, image, text) {
-        console.log(title, image, text);
+        this.id++;
+        console.log(this.id, title, image, text);
         var entry = new blog_entry_1.BlogEntry();
+        entry.id = this.id;
         entry.title = title;
         entry.image = image;
         entry.text = text;
         this.entries.push(entry);
     };
+    AppComponent.prototype.deleteBlogEntry = function (id) {
+        var entryIndex = this.entries.findIndex(function (entry) { return entry.id === id; });
+        if (entryIndex > -1) {
+            this.entries.splice(entryIndex, 1);
+        }
+    };
     return AppComponent;
 }());
 AppComponent = __decorate([

blog-complete/dist/blog/app.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.component.js","sourceRoot":"","sources":["../../app/blog/app.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAAwC;AACxC,mDAAgD;AAChD,2CAAuC;AAOvC,IAAa,YAAY;IAIvB;QAFA,YAAO,GAAgB,EAAE,CAAC;QAGxB,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,+BAAc,CAAA;IAC/B,CAAC;IAED,sCAAe,GAAf,UAAgB,KAAY,EAAE,KAAY,EAAE,IAAW;QACrD,OAAO,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QAChC,IAAI,KAAK,GAAG,IAAI,sBAAS,EAAE,CAAC;QAC5B,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IACH,mBAAC;AAAD,CAAC,AAlBD,IAkBC;AAlBY,YAAY;IALxB,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,oBAAoB;KAClC,CAAC;;GACW,YAAY,CAkBxB;AAlBY,oCAAY"}
+{"version":3,"file":"app.component.js","sourceRoot":"","sources":["../../app/blog/app.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAAwC;AACxC,mDAAgD;AAChD,2CAAuC;AAQvC,IAAa,YAAY;IAKvB;QAHA,YAAO,GAAgB,EAAE,CAAC;QAC1B,OAAE,GAAG,CAAC,CAAC;QAGL,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;QAClB,IAAI,CAAC,OAAO,GAAG,+BAAc,CAAA;IAC/B,CAAC;IAED,sCAAe,GAAf,UAAgB,KAAY,EAAE,KAAY,EAAE,IAAW;QACrD,IAAI,CAAC,EAAE,EAAE,CAAC;QACV,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC;QACzC,IAAI,KAAK,GAAG,IAAI,sBAAS,EAAE,CAAC;QAC5B,KAAK,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;QACnB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACpB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;QAElB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAED,sCAAe,GAAf,UAAgB,EAAS;QACvB,IAAI,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,EAAE,KAAK,EAAE,EAAf,CAAe,CAAC,CAAC;QAClE,EAAE,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACpB,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEH,mBAAC;AAAD,CAAC,AA7BD,IA6BC;AA7BY,YAAY;IANxB,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,UAAU;QACpB,WAAW,EAAE,oBAAoB;KAClC,CAAC;;GAEW,YAAY,CA6BxB;AA7BY,oCAAY"}

blog-complete/dist/blog/blog-entry.component.html

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

blog-complete/dist/blog/blog-entry.component.js

@@ -11,11 +11,19 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var core_1 = require("@angular/core");
 var blog_entry_1 = require("./blog-entry");
+var app_component_1 = require("./app.component");
 var BlogEntryComponent = (function () {
     function BlogEntryComponent() {
     }
+    BlogEntryComponent.prototype.deleteBlogEntry = function (id) {
+        this.blogComponent.deleteBlogEntry(id);
+    };
     return BlogEntryComponent;
 }());
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", app_component_1.AppComponent)
+], BlogEntryComponent.prototype, "blogComponent", void 0);
 __decorate([
     core_1.Input(),
     __metadata("design:type", blog_entry_1.BlogEntry)

blog-complete/dist/blog/blog-entry.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"blog-entry.component.js","sourceRoot":"","sources":["../../app/blog/blog-entry.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAA+C;AAC/C,2CAAuC;AAOvC,IAAa,kBAAkB;IAA/B;IAEA,CAAC;IAAD,yBAAC;AAAD,CAAC,AAFD,IAEC;AADU;IAAR,YAAK,EAAE;8BAAQ,sBAAS;iDAAC;AADf,kBAAkB;IAL9B,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,gBAAgB;QAC1B,WAAW,EAAE,2BAA2B;KACzC,CAAC;GACW,kBAAkB,CAE9B;AAFY,gDAAkB"}
+{"version":3,"file":"blog-entry.component.js","sourceRoot":"","sources":["../../app/blog/blog-entry.component.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,sCAA+C;AAC/C,2CAAuC;AACvC,iDAA6C;AAO7C,IAAa,kBAAkB;IAA/B;IAQA,CAAC;IAJC,4CAAe,GAAf,UAAgB,EAAS;QACvB,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC;IAEH,yBAAC;AAAD,CAAC,AARD,IAQC;AAPU;IAAR,YAAK,EAAE;8BAAgB,4BAAY;yDAAC;AAC5B;IAAR,YAAK,EAAE;8BAAQ,sBAAS;iDAAC;AAFf,kBAAkB;IAL9B,gBAAS,CAAC;QACT,QAAQ,EAAE,MAAM,CAAC,EAAE;QACnB,QAAQ,EAAE,gBAAgB;QAC1B,WAAW,EAAE,2BAA2B;KACzC,CAAC;GACW,kBAAkB,CAQ9B;AARY,gDAAkB"}

blog-complete/dist/blog/blog-entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"blog-entry.js","sourceRoot":"","sources":["../../app/blog/blog-entry.ts"],"names":[],"mappings":";;AAAA;IAAA;IAIA,CAAC;IAAD,gBAAC;AAAD,CAAC,AAJD,IAIC;AAJY,8BAAS"}
+{"version":3,"file":"blog-entry.js","sourceRoot":"","sources":["../../app/blog/blog-entry.ts"],"names":[],"mappings":";;AAAA;IAAA;IAKA,CAAC;IAAD,gBAAC;AAAD,CAAC,AALD,IAKC;AALY,8BAAS"}

blog-complete/dist/blog/initialEntries.js.map

@@ -1 +1 @@
-{"version":3,"file":"initialEntries.js","sourceRoot":"","sources":["../../app/blog/initialEntries.ts"],"names":[],"mappings":";;AAAW,QAAA,cAAc,GAAG;IAC1B;QACE,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,4kLAA4kL;QACnlL,IAAI,EAAE,qFAAqF;KAC5F;IACD;QACE,KAAK,EAAE,uDAAuD;QAC9D,KAAK,EAAE,wEAAwE;QAC/E,IAAI,EAAE,0KAA0K;KACjL;CACF,CAAA"}
+{"version":3,"file":"initialEntries.js","sourceRoot":"","sources":["../../app/blog/initialEntries.ts"],"names":[],"mappings":";;AAAW,QAAA,cAAc,GAAG;IAC1B;QACE,EAAE,EAAE,CAAC;QACL,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,4kLAA4kL;QACnlL,IAAI,EAAE,qFAAqF;KAC5F;IACD;QACE,EAAE,EAAE,CAAC;QACL,KAAK,EAAE,uDAAuD;QAC9D,KAAK,EAAE,wEAAwE;QAC/E,IAAI,EAAE,0KAA0K;KACjL;CACF,CAAA"}