V1.0 Vorerst finaler Stand 16.06.

src/app/app-routing.module.ts

 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {Einkaufszettel1Component} from "./components/einkaufszettel1/einkaufszettel1.component";
+import {EinkaufszettelComponent} from "./components/einkaufszettel1/einkaufszettel.component";
 import {HomeComponent} from "./components/home/home.component";
-import {Einkaufszettel2Component} from "./components/einkaufszettel2/einkaufszettel2.component";
+import {AboutComponent} from "./components/about/about.component";
 
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full'},
   { path: 'home', component: HomeComponent},
-  { path: 'einkaufszettel1', component: Einkaufszettel1Component},
-  { path: 'einkaufszettel2', component: Einkaufszettel2Component},
+  { path: 'Einkaufszettel',
+    children: [
+      { path: '1', component: EinkaufszettelComponent},
+      { path: '2', component: EinkaufszettelComponent} ]},
+  { path: 'about', component: AboutComponent},
+
   { path: '**', redirectTo: 'home'}
 ];
 

src/app/app.module.ts

 import { FooterComponent } from './components/footer/footer.component';
 import { BlogCreateComponent } from './components/blog-create/blog-create.component';
 import { AppRoutingModule } from './app-routing.module';
-import { Einkaufszettel1Component } from './components/einkaufszettel1/einkaufszettel1.component';
+import { EinkaufszettelComponent } from './components/einkaufszettel1/einkaufszettel.component';
 import { HomeComponent } from './components/home/home.component';
-import { Einkaufszettel2Component } from './components/einkaufszettel2/einkaufszettel2.component';
+import { AboutComponent } from './components/about/about.component';
 
 @NgModule({
   declarations: [
     HeaderComponent,
     FooterComponent,
     BlogCreateComponent,
-    Einkaufszettel1Component,
+    EinkaufszettelComponent,
     HomeComponent,
-    Einkaufszettel2Component
+    AboutComponent,
   ],
   imports: [
     BrowserModule,

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

 <div>
   <form (ngSubmit)="saveTask(form.value)" #form="ngForm">
     <div class="form-group">
-      <div><label>Position </label></div>
+      <div><label>Position (falls leer - als letztes) </label></div>
       <div>
         <input type="text" class="form-control" name="title" id="position" #position ngModel required/>
       </div>
     </div>
       <div class="form-group">
-        <div><label>Einkaufsort* </label></div>
+        <div><label>Einkaufsort* (z.B. Aldi Süd, Dehner, DM, Edeka, Hornbach, Lidl, Müller, Netto, OBI, Penny, Rewe, Rossmann) </label></div>
         <div>
           <input type="text" class="form-control" name="title" id="title" #einkaufsort ngModel required/>
         </div>
 
       </div>
       <div class="form-group">
-        <div><label for="kategorie">Kategorie </label></div>
+        <div><label for="kategorie">Kategorie (falls Einkaufsort von vorhandenen abweicht) </label></div>
         <div>
           <input type="text" class="form-control" name="title" 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>
+        <div><label for="kommentar">Besorgungen: </label></div>
+        <textarea id="kommentar" #besorgungen cols="20" rows="3">
     </textarea>
       </div>
 
       <div class="form-group">
         <button
-          (click)="createBlogEntry(einkaufsort.value, kategorie.value, menge.value, kommentar.value, position.value)">
+          (click)="createBlogEntry(einkaufsort.value, kategorie.value, besorgungen.value, position.value)">
           Eintrag anlegen
         </button>
       </div>
         </div>
       </div>
       <div class="form-group">
-        <div><label for="menge">Eintrag auswählen: </label></div>
+        <div><label >Eintrag auswählen: </label></div>
         <div>
           <input type="text" class="form-control" name="title" id="index" #index ng-model required min="0" max=99/>
-        </div>
-      </div>
-
-      <div>
-        <div>
           <button (click)="deleteEntry(index.value)">
             Eintrag löschen
           </button>

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

-import { Component, OnInit } from '@angular/core';
+import {Component} 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[] = [];
-
-  constructor(public fb: FormBuilder) {
-    this.entries = [];
-    this.entries = initialEntries;
-  }
+export class BlogCreateComponent {
+   entries: BlogEntry[] = initialEntries;
 
+  constructor() {
+    this.entries.splice(0, 1);
 
+  }
   saveTask(value: any){
     console.log(value);
   }
 
-  createBlogEntry(einkaufsort: string, kategorie: string, menge: string, kommentar: string, position: string) {
-    if (einkaufsort && kommentar) {
+  createBlogEntry(einkaufsort: string, kategorie: string, besorgungen: string, position: string) {
+    if (einkaufsort && besorgungen) {
       const entry = new BlogEntry();
       entry.einkaufsort = einkaufsort;
-      entry.menge = menge;
-      entry.kommentar = kommentar;
-
+      entry.besorgungen = besorgungen;
       if(einkaufsort === 'Aldi Süd'){
         entry.image = 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg';
         entry.kategorie = 'Lebensmittel';
         else {
           entry.kategorie = kategorie;
         }
-      };
-      if (position == '' || Number(position) >= this.entries.length){
+      }
+      if ( (position =='' )|| Number(position) >= this.entries.length){
         entry.position = this.entries.length;
         this.entries.push(entry);
       }
+      else if (Number(position) < 1){
+        entry.position = 0;
+        this.entries.splice(Number(position), 0, entry);
+        this.entries.forEach(function(part,index,theArray) {
+          theArray[index].position = index;
+        })}
       else {
-        entry.position = Number(position)-1;
+          entry.position = Number(position) - 1;
         this.entries.splice(Number(position)-1, 0, entry);
         this.entries.forEach(function(part,index,theArray) {
           theArray[index].position = index;
-        })
-      }
-
-
-
+        })}
 
     }
-  }
 
+  }
 
   deleteAllEntries() {
     console.log(this.entries.length);
     })
   }
 
-
-  ngOnInit(): void {
-  }
-
 }

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

       <p> {{entry.position + 1}}. Eintrag</p>
         <span class="einkaufsort">{{entry.einkaufsort}}</span>
       <p> {{entry.kategorie}}</p>
-      <p> Menge: {{entry.menge}}</p>
-      <p> {{entry.kommentar}}</p>
+      <p> {{entry.besorgungen}}</p>
     </div>
 </div>

src/app/components/blog-entry/blog-entry.ts

   einkaufsort: string;
   image: string;
   kategorie: string;
-  menge: string;
-  kommentar: string;
+  besorgungen: string;
   position: number;
 }

src/app/components/blog-entry/initialEntries.ts

 export const initialEntries = [
   {
-    einkaufsort: 'Aldi Süd',
-    image: 'https://www.horizont.net/news/media/20/Logo-Aldi-Sd-2017-198042-detailnp.jpeg',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
+    einkaufsort: '',
+    image: '',
+    kategorie: '',
+    besorgungen: '',
     position: 0
-  },
-  {
-    einkaufsort: 'Edeka',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 1
-  },
-
-  {
-    einkaufsort: 'Lidl',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Lidl-Logo.svg/1200px-Lidl-Logo.svg.png',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 2
-  },
-  {
-    einkaufsort: 'Rewe',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Logo_REWE.svg/1200px-Logo_REWE.svg.png',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 3
-  },
-  {
-    einkaufsort: 'Netto',
-    image: 'https://www.netto-online.de/images/favicons/logo_netto.png',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 4
-  },
-  {
-    einkaufsort: 'Penny',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Penny-Markt.svg/1200px-Penny-Markt.svg.png',
-    kategorie: 'Lebensmittel',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 5
-  },
-  {
-    einkaufsort: 'DM',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Dm_Logo.svg/1200px-Dm_Logo.svg.png',
-    kategorie: 'Drogerie',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 6
-  },
-  {
-    einkaufsort: 'Rossmann',
-    image: 'https://www.einkaufsbahnhof.de/wp-content/uploads/2018/03/rossmann_logo_schreibschrift.png',
-    kategorie: 'Drogerie',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 7
-  },
-  {
-    einkaufsort: 'Müller',
-    image: 'https://www.e-einz.de/wp-content/uploads/2017/02/Mueller.png',
-    kategorie: 'Drogerie',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 8
-  },
-  {
-    einkaufsort: 'OBI',
-    image: 'https://media.aubi-plus.com/files/premiumprofil/logo/35d8961-obi.jpg',
-    kategorie: 'Baumarkt',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 9
-  },
-  {
-    einkaufsort: 'Dehner',
-    image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Dehner.svg/1200px-Dehner.svg.png',
-    kategorie: 'Garten-Center',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 10
-  },
-  {
-    einkaufsort: 'Hornbach',
-    image: 'https://www.luvshopping.de/-/media/images/b2c/germany/lubeck/logo-stores/hornbach.jpg?h=442&la=de-DE&mw=650&w=650&hash=C6C36C2C1536745108FF620D3B9CD7E4864A9308',
-    kategorie: 'Baumarkt',
-    menge: '1',
-    kommentar: 'Hier könnten ihre benötigten Einkäufe stehen',
-    position: 11
-  }
-];
+  }];

src/app/components/einkaufszettel1/einkaufszettel1.component.html → src/app/components/einkaufszettel1/einkaufszettel.component.html

-<h1>Einkaufszettel1</h1>
 <app-blog-create><app-blog-entry></app-blog-entry></app-blog-create>

src/app/components/einkaufszettel1/einkaufszettel1.component.spec.ts → src/app/components/einkaufszettel1/einkaufszettel.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { Einkaufszettel1Component } from './einkaufszettel1.component';
+import { EinkaufszettelComponent } from './einkaufszettel.component';
 
 describe('Einkaufszettel1Component', () => {
-  let component: Einkaufszettel1Component;
-  let fixture: ComponentFixture<Einkaufszettel1Component>;
+  let component: EinkaufszettelComponent;
+  let fixture: ComponentFixture<EinkaufszettelComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ Einkaufszettel1Component ]
+      declarations: [ EinkaufszettelComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(Einkaufszettel1Component);
+    fixture = TestBed.createComponent(EinkaufszettelComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/components/einkaufszettel1/einkaufszettel.component.ts

+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'app-einkaufszettel1',
+  templateUrl: './einkaufszettel.component.html',
+  styleUrls: ['./einkaufszettel.component.css']
+})
+export class EinkaufszettelComponent {
+
+  constructor() {
+  }
+
+
+}

src/app/components/einkaufszettel1/einkaufszettel1.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-einkaufszettel1',
-  templateUrl: './einkaufszettel1.component.html',
-  styleUrls: ['./einkaufszettel1.component.css']
-})
-export class Einkaufszettel1Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/components/einkaufszettel2/einkaufszettel2.component.html

-<h1>Einkaufszettel2</h1>
-<app-blog-create><app-blog-entry></app-blog-entry></app-blog-create>
-

src/app/components/einkaufszettel2/einkaufszettel2.component.spec.ts

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

src/app/components/einkaufszettel2/einkaufszettel2.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-einkaufszettel2',
-  templateUrl: './einkaufszettel2.component.html',
-  styleUrls: ['./einkaufszettel2.component.css']
-})
-export class Einkaufszettel2Component implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}

src/app/components/footer/footer.component.html

 <footer class="footer">
   <div class="container">
     <div class="content has-text-centered">
+      <br>
+      <br>
       <p>
         Made by Christian Greif - greifch67520@th-nuernberg.de - <a href="https://www.th-nuernberg.de/">Technische Hochschule Nürnberg</a>
       </p>

src/app/components/footer/footer.component.ts

   styleUrls: ['./footer.component.css']
 })
 export class FooterComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit(): void {

src/app/components/header/header.component.html

 <img src="https://ranking.zeit.de/che/images/logos/Hochschule_400.jpg">
   <app-navbar></app-navbar>
 </header>
+<br>

src/app/components/home/home.component.html

   <h1>Willkommen in der Einkaufszettel-App</h1>
   <div>
     <h3>Bitte wählen sie einen Einkaufszettel aus:</h3>
-    <a routerLink="/einkaufszettel1" routerLinkActive="active">Einkaufszettel1</a>
+    <a class="myLinks" routerLink="/Einkaufszettel/1" routerLinkActive="active">Einkaufszettel1</a>
   </div>
   <div>
-    <a routerLink="/einkaufszettel2" routerLinkActive="active">Einkaufszettel2</a>
+    <a class="myLinks" routerLink="/Einkaufszettel/2" routerLinkActive="active">Einkaufszettel2</a>
   </div>
 </nav>

src/app/navbar/navbar.component.html

         <a class="nav-link" href="home">Startseite</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="einkaufszettel1">Einkaufszettel1</a>
+        <a class="nav-link" href="/Einkaufszettel/1">Einkaufszettel1</a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="einkaufszettel2">Einkaufszettel2</a>
+        <a class="nav-link" href="/Einkaufszettel/2">Einkaufszettel2</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="/about">Über</a>
       </li>
     </ul>
   </div>

src/app/navbar/navbar.component.ts

   constructor() {
 
   }
-  toggleNavbar() {
-    this.navbarOpen = !this.navbarOpen;
-  }
+
   ngOnInit(): void {
     this.navbarOpen = !this.navbarOpen;
   }

src/styles.css

   padding-left: 15px;
 }
 
+.myLinks {
+  color: blue;
+  text-decoration: underline;
+}
+
+
 .form {
   background-color: #eee;
   width: 500px; /* Breite des Formulars */
 }
 
 label {
-  width: 100px;
+  width: 500px;
   cursor: pointer;
 }