Add delete for blog entries
parent
4ee4b5442b
commit
345b371e24
|
@ -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">
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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
|
@ -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">
|
||||
|
|
|
@ -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([
|
||||
|
|
|
@ -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"}
|
|
@ -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>
|
|
@ -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)
|
||||
|
|
|
@ -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"}
|
|
@ -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
|
@ -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"}
|
Loading…
Reference in New Issue