V0.1f Layout Modularisierung mittels Components + Implementierung Basisfunktion Navbar

src/app/app.component.html

-<h1>Einkaufszettel</h1>
+<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>
   </div>
 </div>
 
-
+<app-footer></app-footer>

src/app/app.component.ts

 import {Component} from '@angular/core';
-import {initialEntries} from './initialEntries';
-import {BlogEntry} from './blog-entry';
+import {initialEntries} from './components/blog-entry/initialEntries';
+import {BlogEntry} from './components/blog-entry/blog-entry';
 import {FormBuilder, Validators} from '@angular/forms';
 @Component({
   selector: 'app-root',
  }
 
   createBlogEntry(title: string, image: string, kategorie: string, menge: string, kommentar: string, ) {
-    //if (title && image && kommentar && kategorie) {
+    if (title && image && kommentar && kategorie) {
       const entry = new BlogEntry();
       entry.title = title;
       entry.image = image;
       entry.menge = menge;
       entry.kommentar = kommentar;
       this.entries.push(entry);
-    //}
+    }
   }
   deleteAllEntries() {
     console.log(this.entries.length);

src/app/app.module.ts

-import { BlogEntryComponent } from './blog-entry.component';
+import { BlogEntryComponent } from './components/blog-entry/blog-entry.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { NavbarComponent } from './navbar/navbar.component';
+import { HeaderComponent } from './components/header/header.component';
+import { FooterComponent } from './components/footer/footer.component';
 
 @NgModule({
   declarations: [
     AppComponent,
-    BlogEntryComponent
+    BlogEntryComponent,
+    NavbarComponent,
+    HeaderComponent,
+    FooterComponent
   ],
   imports: [
     BrowserModule,

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

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

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

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

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

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

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

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

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

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

src/app/components/header/header.component.ts

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

src/app/navbar/navbar.component.html

+<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>
+      </li>
+
+      <li class="nav-item">
+        <a class="nav-link" href="#">Einkaufszettel 2</a>
+      </li>
+    </ul>
+  </div>
+</nav>

src/app/navbar/navbar.component.spec.ts

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

src/app/navbar/navbar.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+  navbarOpen = false;
+
+  constructor() {
+
+  }
+  toggleNavbar() {
+    this.navbarOpen = !this.navbarOpen;
+  }
+  ngOnInit(): void {
+    this.navbarOpen = !this.navbarOpen;
+  }
+
+}