Browse Source

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

master
Christian Greif 4 years ago
parent
commit
ff7c00e08c

+ 3
- 2
src/app/app.component.html View File

@@ -1,4 +1,5 @@
<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>
@@ -86,4 +87,4 @@
</div>
</div>

<app-footer></app-footer>

+ 4
- 4
src/app/app.component.ts View File

@@ -1,6 +1,6 @@
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',
@@ -32,7 +32,7 @@ export class AppComponent {
}

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;
@@ -40,7 +40,7 @@ export class AppComponent {
entry.menge = menge;
entry.kommentar = kommentar;
this.entries.push(entry);
//}
}
}
deleteAllEntries() {
console.log(this.entries.length);

+ 8
- 2
src/app/app.module.ts View File

@@ -1,14 +1,20 @@
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/blog-entry.component.html → src/app/components/blog-entry/blog-entry.component.html View File


src/app/blog-entry.component.ts → src/app/components/blog-entry/blog-entry.component.ts View File


src/app/blog-entry.ts → src/app/components/blog-entry/blog-entry.ts View File


src/app/initialEntries.ts → src/app/components/blog-entry/initialEntries.ts View File


+ 0
- 0
src/app/components/footer/footer.component.css View File


+ 10
- 0
src/app/components/footer/footer.component.html View File

@@ -0,0 +1,10 @@
<!-- 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>

+ 25
- 0
src/app/components/footer/footer.component.spec.ts View File

@@ -0,0 +1,25 @@
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();
});
});

+ 15
- 0
src/app/components/footer/footer.component.ts View File

@@ -0,0 +1,15 @@
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 {
}

}

+ 0
- 0
src/app/components/header/header.component.css View File


+ 5
- 0
src/app/components/header/header.component.html View File

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

+ 25
- 0
src/app/components/header/header.component.spec.ts View File

@@ -0,0 +1,25 @@
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();
});
});

+ 11
- 0
src/app/components/header/header.component.ts View File

@@ -0,0 +1,11 @@
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() {}
}

+ 0
- 0
src/app/navbar/navbar.component.css View File


+ 23
- 0
src/app/navbar/navbar.component.html View File

@@ -0,0 +1,23 @@
<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>

+ 25
- 0
src/app/navbar/navbar.component.spec.ts View File

@@ -0,0 +1,25 @@
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();
});
});

+ 21
- 0
src/app/navbar/navbar.component.ts View File

@@ -0,0 +1,21 @@
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;
}

}

Loading…
Cancel
Save