V0.1g Weitere Modulasierung der Components / Layouts

src/app/app.component.html

-<app-header></app-header>
-<h1>Einkaufszettel1</h1>
-<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
-<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
-<div>
-  <form  (ngSubmit)="saveTask(form.value)" #form="ngForm">
-    <div class="form-group">
-      <div><label for="title">Titel* </label></div>
-
-      <div>
-        <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
-      </div>
-
-    </div>
-
-    <div class="form-group">
-      <div><label for="image">Bild-URL* </label></div>
-
-      <div>
-        <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <div><label>Kategorie* </label></div>
-      <div>
-        <input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
-      </div>
-    </div>
 
-    <div class="form-group">
-      <div><label for="menge">Menge* </label></div>
-      <div>
-        <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
-      </div>
-    </div>
-
-    <div class="form-group">
-      <div><label for="kommentar">Kommentar: </label></div>
-      <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
-    </textarea>
-    </div>
-
-    <div class="form-group">
-      <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
-        Eintrag anlegen
-      </button>
-    </div>
-
-    <div>
-      <button (click)="deleteAllEntries()">
-        Alle Einträge löschen
-      </button>
-    </div>
-    <div>
-      <button (click)="deleteLastEntry()">
-        Letzten Eintrag Löschen
-      </button>
-    </div>
-
-  </form>
-</div>
-
-<div class="container">
-  <div class="row custom-wrapper">
-    <div class="col-md-12">
-      <!-- Form starts -->
-      <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
-        <div class="group-gap">
-          <div class="d-block my-3">
-            <div class="mb-3">
-              <select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
-                <option value="">Wählen sie eine Kategorie</option>
-                <option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
-              </select>
-              <!-- error block -->
-              <div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
-                <sup>*</sup>Bitte geben sie eine Kategorie ein!
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Submit Button -->
-        <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
-      </form><!-- Form ends -->
-    </div>
-  </div>
-</div>
 
+<app-header></app-header>
+<app-blog-create></app-blog-create>
 <app-footer></app-footer>

src/app/app.component.spec.ts

     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'Einkaufszettel'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('Einkaufszettel');
-  });
 
   it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);

src/app/app.component.ts

-import {Component} from '@angular/core';
-import {initialEntries} from './components/blog-entry/initialEntries';
-import {BlogEntry} from './components/blog-entry/blog-entry';
-import {FormBuilder, Validators} from '@angular/forms';
+import {Component, OnInit} from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
-  title = 'Einkaufszettel';
-  entries: BlogEntry[] = [];
-  isSubmitted = false;
-  Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
+  constructor(){
 
-  constructor(public fb: FormBuilder) {
-    this.entries = [];
-    this.entries = initialEntries;
   }
 
-  // Getter method to access formcontrols
-  get kategorieName() {
-    return this.registrationForm.get('kategorieName');
+  ngOnInit(): void {
   }
-
-  /*########### Form ###########*/
-  registrationForm = this.fb.group({
-    kategorieName: ['', [Validators.required]]
-  });
- saveTask(value: any){
-   console.log(value);
- }
-
-  createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
-    if (title && image && kommentar && kategorie) {
-      const entry = new BlogEntry();
-      entry.title = title;
-      entry.image = image;
-      entry.kategorie = kategorie;
-      entry.menge = menge;
-      entry.kommentar = kommentar;
-      this.entries.push(entry);
-    }
-  }
-  deleteAllEntries() {
-    console.log(this.entries.length);
-    const index: number = this.entries.length;
-    if (index !== -1) {
-      this.entries = this.entries.splice(index, 1);
-    }
-  }
-    deleteLastEntry() {
-      console.log(this.entries.length);
-      const index: number = this.entries.length;
-      if (index !== -1) {
-        this.entries.splice(index-1, 1);
-      }
-    }
-
-    // Kategorie mit Drop Down Menu wählen
-  changeKategorie(e) {
-    console.log(e.value);
-    this.kategorieName.setValue(e.target.value, {
-      onlySelf: true
-    });
-  }
-
-  /*########### Template Driven Form ###########*/
-  onSubmit() {
-    this.isSubmitted = true;
-    if (!this.registrationForm.valid) {
-      return false;
-    } else {
-      alert(JSON.stringify(this.registrationForm.value));
-    }
-
-  }
-
 }
 

src/app/app.module.ts

 import { NavbarComponent } from './navbar/navbar.component';
 import { HeaderComponent } from './components/header/header.component';
 import { FooterComponent } from './components/footer/footer.component';
+import { BlogCreateComponent } from './components/blog-create/blog-create.component';
 
 @NgModule({
   declarations: [
     BlogEntryComponent,
     NavbarComponent,
     HeaderComponent,
-    FooterComponent
+    FooterComponent,
+    BlogCreateComponent
   ],
   imports: [
     BrowserModule,

src/app/components/blog-create/blog-create.component.html

+<h1>Einkaufszettel1</h1>
+<app-blog-entry *ngFor="let entry of entries" [entry]="entry"></app-blog-entry>
+<h2>Neuen Einkaufszettel Eintrag anlegen:</h2>
+<div>
+  <form  (ngSubmit)="saveTask(form.value)" #form="ngForm">
+    <div class="form-group">
+      <div><label for="title">Titel* </label></div>
+
+      <div>
+        <input type="text" class="form-control" name="title" id="title" #title ngModel required/>
+      </div>
+
+    </div>
+
+    <div class="form-group">
+      <div><label for="image">Bild-URL* </label></div>
+
+      <div>
+        <input type="text" class="form-control" name="title" id="image" #image ngModel required/>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div><label>Kategorie* </label></div>
+      <div>
+        <input type="text" class="form-control" id="kategorie" #kategorie ngModel required/>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div><label for="menge">Menge* </label></div>
+      <div>
+        <input type="text" class="form-control" name="title" id="menge" #menge ngModel required/>
+      </div>
+    </div>
+
+    <div class="form-group">
+      <div><label for="kommentar">Kommentar: </label></div>
+      <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
+    </textarea>
+    </div>
+
+    <div class="form-group">
+      <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
+        Eintrag anlegen
+      </button>
+    </div>
+
+    <div>
+      <button (click)="deleteAllEntries()">
+        Alle Einträge löschen
+      </button>
+    </div>
+    <div>
+      <button (click)="deleteLastEntry()">
+        Letzten Eintrag Löschen
+      </button>
+    </div>
+
+  </form>
+</div>
+
+<div class="container">
+  <div class="row custom-wrapper">
+    <div class="col-md-12">
+      <!-- Form starts -->
+      <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
+        <div class="group-gap">
+          <div class="d-block my-3">
+            <div class="mb-3">
+              <select class="custom-select" (change)="changeKategorie($event)" formControlName="kategorieName">
+                <option value="">Wählen sie eine Kategorie</option>
+                <option *ngFor="let kategorie of Kategorien" [ngValue]="kategorie">{{kategorie}}</option>
+              </select>
+              <!-- error block -->
+              <div class="invalid-feedback" *ngIf="isSubmitted && kategorieName.errors?.required">
+                <sup>*</sup>Bitte geben sie eine Kategorie ein!
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Submit Button -->
+        <button type="submit" class="btn btn-danger btn-lg btn-block">Speichern</button>
+      </form><!-- Form ends -->
+    </div>
+  </div>
+</div>

src/app/components/blog-create/blog-create.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BlogCreateComponent } from './blog-create.component';
+
+describe('BlogCreateComponent', () => {
+  let component: BlogCreateComponent;
+  let fixture: ComponentFixture<BlogCreateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BlogCreateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BlogCreateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/blog-create/blog-create.component.ts

+import { Component, OnInit } from '@angular/core';
+import {BlogEntry} from "../blog-entry/blog-entry";
+import {FormBuilder, Validators} from "@angular/forms";
+import {initialEntries} from "../blog-entry/initialEntries";
+
+@Component({
+  selector: 'app-blog-create',
+  templateUrl: './blog-create.component.html',
+  styleUrls: ['./blog-create.component.css']
+})
+export class BlogCreateComponent implements OnInit {
+  title = 'Einkaufszettel';
+  entries: BlogEntry[] = [];
+  isSubmitted = false;
+  Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
+
+  constructor(public fb: FormBuilder) {
+    this.entries = [];
+    this.entries = initialEntries;
+  }
+
+  // Getter method to access formcontrols
+  get kategorieName() {
+    return this.registrationForm.get('kategorieName');
+  }
+
+  /*########### Form ###########*/
+  registrationForm = this.fb.group({
+    kategorieName: ['', [Validators.required]]
+  });
+  saveTask(value: any){
+    console.log(value);
+  }
+
+  createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
+    if (title && image && kommentar && kategorie) {
+      const entry = new BlogEntry();
+      entry.title = title;
+      entry.image = image;
+      entry.kategorie = kategorie;
+      entry.menge = menge;
+      entry.kommentar = kommentar;
+      this.entries.push(entry);
+    }
+  }
+  deleteAllEntries() {
+    console.log(this.entries.length);
+    const index: number = this.entries.length;
+    if (index !== -1) {
+      this.entries = this.entries.splice(index, 1);
+    }
+  }
+  deleteLastEntry() {
+    console.log(this.entries.length);
+    const index: number = this.entries.length;
+    if (index !== -1) {
+      this.entries.splice(index-1, 1);
+    }
+  }
+
+  // Kategorie mit Drop Down Menu wählen
+  changeKategorie(e) {
+    console.log(e.value);
+    this.kategorieName.setValue(e.target.value, {
+      onlySelf: true
+    });
+  }
+
+  /*########### Template Driven Form ###########*/
+  onSubmit() {
+    this.isSubmitted = true;
+    if (!this.registrationForm.valid) {
+      return false;
+    } else {
+      alert(JSON.stringify(this.registrationForm.value));
+    }
+
+  }
+
+  ngOnInit(): void {
+  }
+
+}