V2.0 Finaler Stand 17.06. mit angepasstem ReadME für den Start der Angular Applikation

README.md

@@ -2,6 +2,23 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.6.
 
+
+# How to start Angular
+1. open command Window and change directory to Project Path
+
+2. Run `npm install` for installing all Project Dependencies <br>
+(all Dependencies inclusive node.js will be installed, generally you could use `npm` and `yarn`, but never use both at the same time for managing the dependencies. This could cause problems.)
+
+3. Run `ng serve` for compiling and starting of the angular dev server <br> 
+  (If the port ::4200 is already in use, the ng serve will abort with a exception
+  "An unhandled exception occurred: Port 4200 is already in use. Use '--port' to specify a different port.")
+  
+4. Navigate to 'http://localhost:4200/' after successful compiling <br>
+   (** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
+    : Compiled successfully.)
+    
+4. Run `Ctrl + C` to stop Angular dev server. 
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -25,3 +42,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+

package-lock.json

@@ -481,9 +481,9 @@
       "integrity": "sha512-DyUDGxp4kF4majcm9COVzu/9wzmgnfj+d6GUEjYkbqSH9QP05LonJ6wHMNxNMN6qMfawdCxDe0TnNDRPmHUj9w=="
     },
     "@angular/router": {
-      "version": "9.1.7",
-      "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.7.tgz",
-      "integrity": "sha512-ycrkhkCbfOMCe9PngFjnyk8nH5jt0Kyb2NPtjmaGOtSCuZBZ0kOU0rQGmQnj3d2PiT0Yir59S8eEAf3Fh0iDuw=="
+      "version": "9.1.11",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-9.1.11.tgz",
+      "integrity": "sha512-D6CCDeSK/F6dWSB/a1g/zB072xG5LadLSV8afQ57oX1KHePx21LcoRG4tUtFMMHh/jZXRc9pMQIR1/9FrrXF3Q=="
     },
     "@babel/code-frame": {
       "version": "7.8.3",
@@ -2500,6 +2500,11 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
+    "bootstrap": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz",
+      "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -18,7 +18,8 @@
     "@angular/forms": "~9.1.7",
     "@angular/platform-browser": "~9.1.7",
     "@angular/platform-browser-dynamic": "~9.1.7",
-    "@angular/router": "~9.1.7",
+    "@angular/router": "^9.1.11",
+    "bootstrap": "^4.5.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

src/app/app-routing.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import {EinkaufszettelComponent} from "./components/einkaufszettel1/einkaufszettel.component";
+import {HomeComponent} from "./components/home/home.component";
+import {AboutComponent} from "./components/about/about.component";
+
+const routes: Routes = [
+  { path: '', redirectTo: 'home', pathMatch: 'full'},
+  { path: 'home', component: HomeComponent},
+  { path: 'Einkaufszettel',
+    children: [
+      { path: '1', component: EinkaufszettelComponent},
+      { path: '2', component: EinkaufszettelComponent} ]},
+  { path: 'about', component: AboutComponent},
+
+  { path: '**', redirectTo: 'home'}
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/app.component.html

@@ -1,5 +1,6 @@
-
-
 <app-header></app-header>
-<app-blog-create></app-blog-create>
+<body>
+<router-outlet></router-outlet>
+</body>
 <app-footer></app-footer>
+

src/app/app.component.spec.ts

@@ -17,7 +17,7 @@ describe('AppComponent', () => {
   });
 
 
-  it('should render title', () => {
+  it('should render einkaufsort', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement;

src/app/app.component.ts

@@ -1,9 +1,9 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html'
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
 
   constructor(){
 

src/app/app.module.ts

@@ -8,6 +8,10 @@ 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';
+import { AppRoutingModule } from './app-routing.module';
+import { EinkaufszettelComponent } from './components/einkaufszettel1/einkaufszettel.component';
+import { HomeComponent } from './components/home/home.component';
+import { AboutComponent } from './components/about/about.component';
 
 @NgModule({
   declarations: [
@@ -16,12 +20,16 @@ import { BlogCreateComponent } from './components/blog-create/blog-create.compon
     NavbarComponent,
     HeaderComponent,
     FooterComponent,
-    BlogCreateComponent
+    BlogCreateComponent,
+    EinkaufszettelComponent,
+    HomeComponent,
+    AboutComponent,
   ],
   imports: [
     BrowserModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AppRoutingModule,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/about/about.component.html

@@ -0,0 +1,16 @@
+<h2>Kontakt:</h2>
+<p>  Sie möchten mit uns in Kontakt treten, weil sie Fragen, Probleme oder Anregungen haben? Kein Problem! Über die nachfolgenden Kontaktdaten erreichen Sie uns. Wir freuen uns auf Ihre Nachricht!
+</p>
+<p>Technische Hochschule Nürnberg <br>
+  Christian Greif<br>
+  Kesslerplatz 12 <br>
+  90489 Nürnberg <br>
+  Tel. 0911-5880-0<br>
+  Fax 0911-5880-8309 <br>
+  E-Mail: <a href="mailto:info@th-nuernberg.de">Info@TH-Nuernberg.de</a> <br> Internet: <a href="https://www.th-nuernberg.de/">Technische Hochschule Nürnberg</a></p>
+
+<p> Das WebTeam erreichen Sie über folgende E-Mail Adresse <br> E-Mail: <a href="mailto:greifch67520@th-nuernberg.de">greifch67520@th-nuernberg.de</a> </p>
+<br>
+<br>
+<br>
+

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

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

src/app/components/about/about.component.ts

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

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

@@ -1,87 +1,62 @@
-<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">
+  <form (ngSubmit)="saveTask(form.value)" #form="ngForm">
     <div class="form-group">
-      <div><label for="title">Titel* </label></div>
-
+      <div><label>Position (falls leer - als letztes) </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/>
+        <input type="text" class="form-control" name="title" id="position" #position ngModel required/>
       </div>
     </div>
+      <div class="form-group">
+        <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 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 class="form-group">
+        <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>
 
-    <div class="form-group">
-      <div><label for="kommentar">Kommentar: </label></div>
-      <textarea id="kommentar" #kommentar cols="20" rows="3" #text>
+      <div class="form-group">
+        <div><label for="kommentar">Besorgungen: </label></div>
+        <textarea id="kommentar" #besorgungen cols="20" rows="3">
     </textarea>
-    </div>
+      </div>
 
-    <div class="form-group">
-      <button (click)="createBlogEntry(title.value, image.value, kategorie.value,menge.value, kommentar.value)">
-        Eintrag anlegen
-      </button>
-    </div>
+      <div class="form-group">
+        <button
+          (click)="createBlogEntry(einkaufsort.value, kategorie.value, besorgungen.value, position.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>
+      <div class="form-group">
+        <div>
+          <button (click)="deleteAllEntries()">
+            Alle Einträge löschen
+          </button>
+        </div>
+        <div>
+          <button (click)="deleteLastEntry()">
+            Letzten Eintrag Löschen
+          </button>
+        </div>
+      </div>
+      <div class="form-group">
+        <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/>
+          <button (click)="deleteEntry(index.value)">
+            Eintrag löschen
+          </button>
+        </div>
+      </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.ts

@@ -1,48 +1,95 @@
-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[] = [];
-  isSubmitted = false;
-  Kategorien: any = ['Lebensmittel', 'Spielwaren', 'Technik', 'Sonstiges'];
+export class BlogCreateComponent {
+   entries: BlogEntry[] = initialEntries;
+
+  constructor() {
+    this.entries.splice(0, 1);
 
-  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) {
+  createBlogEntry(einkaufsort: string, kategorie: string, besorgungen: string, position: string) {
+    if (einkaufsort && besorgungen) {
       const entry = new BlogEntry();
-      entry.title = title;
-      entry.image = image;
-      entry.kategorie = kategorie;
-      entry.menge = menge;
-      entry.kommentar = kommentar;
-      this.entries.push(entry);
+      entry.einkaufsort = einkaufsort;
+      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 if (einkaufsort === 'Edeka') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Logo_Edeka.svg/1200px-Logo_Edeka.svg.png';
+        entry.kategorie = 'Lebensmittel';}
+      else if (einkaufsort == 'Lidl') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Lidl-Logo.svg/1200px-Lidl-Logo.svg.png';
+        entry.kategorie = 'Lebensmittel';}
+      else if (einkaufsort == 'Rewe') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Logo_REWE.svg/1200px-Logo_REWE.svg.png';
+        entry.kategorie = 'Lebensmittel';}
+      else if (einkaufsort == 'Netto') {
+        entry.image = 'https://www.netto-online.de/images/favicons/logo_netto.png';
+        entry.kategorie = 'Lebensmittel';}
+      else if (einkaufsort == 'Penny') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Penny-Markt.svg/1200px-Penny-Markt.svg.png';
+        entry.kategorie = 'Lebensmittel';}
+      else if (einkaufsort == 'DM') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Dm_Logo.svg/1200px-Dm_Logo.svg.png';
+        entry.kategorie = 'Drogerie';}
+      else if (einkaufsort == 'Rossmann') {
+        entry.image = 'https://www.einkaufsbahnhof.de/wp-content/uploads/2018/03/rossmann_logo_schreibschrift.png';
+        entry.kategorie = 'Drogerie';}
+      else if (einkaufsort == 'Müller') {
+        entry.image = 'https://www.e-einz.de/wp-content/uploads/2017/02/Mueller.png';
+        entry.kategorie = 'Drogerie';}
+      else if (einkaufsort == 'OBI') {
+        entry.image = 'https://media.aubi-plus.com/files/premiumprofil/logo/35d8961-obi.jpg';
+        entry.kategorie = 'Baumarkt';}
+      else if (einkaufsort == 'Dehner') {
+        entry.image = 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Dehner.svg/1200px-Dehner.svg.png';
+        entry.kategorie = 'Garten-Center';}
+      else if (einkaufsort == 'Hornbach') {
+        entry.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';
+        entry.kategorie = 'Baumarkt';}
+      else {
+        entry.image = 'https://previews.123rf.com/images/krisdog/krisdog1312/krisdog131200065/24639132-ein-beispiel-f%C3%BCr-ein-einkaufswagen-oder-einkaufswagen-symbol.jpg';
+        if(kategorie === '')
+        entry.kategorie = 'Unbekannt';
+        else {
+          entry.kategorie = kategorie;
+        }
+      }
+      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;
+        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);
     const index: number = this.entries.length;
@@ -58,26 +105,14 @@ export class BlogCreateComponent implements OnInit {
     }
   }
 
-  // Kategorie mit Drop Down Menu wählen
-  changeKategorie(e) {
-    console.log(e.value);
-    this.kategorieName.setValue(e.target.value, {
-      onlySelf: true
-    });
-  }
+  deleteEntry(str: string)
+  {
+    const index = Number(str) - 1;
+    this.entries.splice(index,1)
 
-  /*########### Template Driven Form ###########*/
-  onSubmit() {
-    this.isSubmitted = true;
-    if (!this.registrationForm.valid) {
-      return false;
-    } else {
-      alert(JSON.stringify(this.registrationForm.value));
-    }
-
-  }
-
-  ngOnInit(): void {
+    this.entries.forEach(function(part,index,theArray) {
+      theArray[index].position = index;
+    })
   }
 
 }

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

@@ -1,10 +1,11 @@
 <div class="blog-entry">
     <div class="blog-image">
-        <img [src]="entry.image" [alt]="entry.title"/>
+        <img [src]="entry.image" [alt]="entry.einkaufsort"/>
     </div>
     <div class="blog-summary">
-        <span class="title">{{entry.title}}</span>
+      <p> {{entry.position + 1}}. Eintrag</p>
+        <span class="einkaufsort">{{entry.einkaufsort}}</span>
       <p> {{entry.kategorie}}</p>
-      <p> {{entry.kommentar}}</p>
+      <p> {{entry.besorgungen}}</p>
     </div>
 </div>

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

@@ -1,8 +1,7 @@
 export class BlogEntry {
-  title: string;
+  einkaufsort: string;
   image: string;
   kategorie: string;
-  menge: string;
-  kommentar: string;
-
+  besorgungen: string;
+  position: number;
 }

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

@@ -1,16 +1,8 @@
 export const initialEntries = [
   {
-    title: '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'
-  },
-  {
-    title: '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
+  }];

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

@@ -0,0 +1 @@
+<app-blog-create><app-blog-entry></app-blog-entry></app-blog-create>

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

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

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

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

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

@@ -2,6 +2,8 @@
 <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

@@ -6,7 +6,6 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./footer.component.css']
 })
 export class FooterComponent implements OnInit {
-
   constructor() { }
 
   ngOnInit(): void {

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

@@ -3,3 +3,4 @@
 <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

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

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

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

src/app/components/home/home.component.ts

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

src/app/navbar/navbar.component.css

@@ -0,0 +1,3 @@
+.nav-link {
+ color: red
+}

src/app/navbar/navbar.component.html

@@ -1,22 +1,19 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <a class="navbar-brand" href="#">
-    Menü
-  </a>
-
-  <button class="navbar-toggler" type="button"
-          (click)="toggleNavbar()">
-    <span class="navbar-toggler-icon"></span>
-  </button>
 
   <div class="collapse navbar-collapse"
        [ngClass]="{ 'show': navbarOpen }">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <a class="nav-link" href="#">Einkaufszettel 1</a>
+        <a class="nav-link" href="home">Startseite</a>
       </li>
-
       <li class="nav-item">
-        <a class="nav-link" href="#">Einkaufszettel 2</a>
+        <a class="nav-link" href="/Einkaufszettel/1">Einkaufszettel1</a>
+      </li>
+      <li class="nav-item">
+        <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

@@ -11,9 +11,7 @@ export class NavbarComponent implements OnInit {
   constructor() {
 
   }
-  toggleNavbar() {
-    this.navbarOpen = !this.navbarOpen;
-  }
+
   ngOnInit(): void {
     this.navbarOpen = !this.navbarOpen;
   }

src/index.html

@@ -8,6 +8,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body>
-  <app-root></app-root>
+<app-root></app-root>
 </body>
 </html>

src/styles.css

@@ -1,8 +1,15 @@
+@import '~bootstrap/dist/css/bootstrap.css';
 body {
   font-family: Helvetica;
   padding-left: 15px;
 }
 
+.myLinks {
+  color: blue;
+  text-decoration: underline;
+}
+
+
 .form {
   background-color: #eee;
   width: 500px; /* Breite des Formulars */
@@ -17,7 +24,7 @@ body {
 }
 
 label {
-  width: 100px;
+  width: 500px;
   cursor: pointer;
 }