Add delete for blog entries

keep-around/dc735e80914fa50c9bca8f6c78c100b7ed19408f
Florian Hartwich 2017-02-27 11:45:59 +01:00
parent 4ee4b5442b
commit 345b371e24
15 changed files with 55 additions and 8 deletions

View File

@ -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">

View File

@ -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);
}
}
}

View File

@ -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>

View File

@ -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);
}
}

View File

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

File diff suppressed because one or more lines are too long

View File

@ -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">

View File

@ -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([

View File

@ -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"}

View File

@ -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>

View File

@ -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)

View File

@ -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"}

View File

@ -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"}

File diff suppressed because one or more lines are too long

View File

@ -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"}