Project Components and Databinding

2021-12-14 12:57:13 +01:00 · 2021-12-14 12:57:13 +01:00 · 37754150e6
commit 37754150e6
parent 776ad68f87
18 changed files with 98 additions and 71 deletions
--- a/project/src/app/app.component.html
+++ b/project/src/app/app.component.html
@ -1,4 +1,4 @@
-<app-header (featureSelected)="onNavgate($event)"></app-header>
+<app-header (featureSelected)="onNavigate($event)"></app-header>
 <div class="container">
  <div class="row">
    <div class="col-md-12">
--- a/project/src/app/app.component.spec.ts
+++ b/project/src/app/app.component.spec.ts
@ -1,31 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as title 'project'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('project');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('.content span')?.textContent).toContain('project app is running!');
-  });
-});
--- a/project/src/app/app.component.ts
+++ b/project/src/app/app.component.ts
@ -6,10 +6,9 @@ import { Component } from '@angular/core';
  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'project';
  loadedFeature = 'recipe';

-  onNavgate(feature: string) {
+  onNavigate(feature: string) {
    this.loadedFeature = feature;
  }
 }
--- a/project/src/app/app.module.ts
+++ b/project/src/app/app.module.ts
@ -1,6 +1,6 @@
-import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './header/header.component';
 import { RecipesComponent } from './recipes/recipes.component';
@ -22,7 +22,8 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed
    ShoppingEditComponent
  ],
  imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
--- a/project/src/app/header/header.component.html
+++ b/project/src/app/header/header.component.html
@ -5,15 +5,15 @@
        </div>
        <div class="navbar-default">
            <ul class="nav navbar-nav">
-                <li><a href="#" (click)="onSelect('recipe')">Recipe</a></li>
+        <li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
                <li><a href="#" (click)="onSelect('shopping-list')">Shopping List</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
-                    <a href="#" class="dropdown-toggle" role="button">Manage<span Class="caret"></span></a>
+          <a href="#" class="dropdown-toggle" role="button">Manage <span class="caret"></span></a>
                    <ul class="dropdown-menu">
-                        <li><a>/li>href="#">Saving data</a></li>
-                        <li><a href="#">Fetching data</a></li>
+            <li><a href="#">Save Data</a></li>
+            <li><a href="#">Fetch Data</a></li>
                    </ul>
                </li>
            </ul>
--- a/project/src/app/header/header.component.ts
+++ b/project/src/app/header/header.component.ts
@ -2,8 +2,7 @@ import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.css']
+  templateUrl: './header.component.html'
 })
 export class HeaderComponent {
  @Output() featureSelected = new EventEmitter<string>();
@ -11,5 +10,4 @@ export class HeaderComponent {
  onSelect(feature: string) {
    this.featureSelected.emit(feature);
  }
-
 }
--- a/project/src/app/recipes/recipe-detail/recipe-detail.component.html
+++ b/project/src/app/recipes/recipe-detail/recipe-detail.component.html
@ -1,11 +1,15 @@
 <div class="row">
  <div class="col-xs-12">
-    <img src="" alt="" class="img-responsive">
+    <img
+      [src]="recipe.imagePath"
+      alt="{{ recipe.name }}"
+      class="img-responsive"
+      style="max-height: 300px;">
  </div>
 </div>
 <div class="row">
  <div class="col-xs-12">
-    <h1>Recipe Name</h1>
+    <h1>{{ recipe.name }}</h1>
  </div>
 </div>
 <div class="row">
@ -26,7 +30,7 @@
 </div>
 <div class="row">
  <div class="col-xs-12">
-    Description
+    {{ recipe.description }}
  </div>
 </div>
 <div class="row">
--- a/project/src/app/recipes/recipe-detail/recipe-detail.component.ts
+++ b/project/src/app/recipes/recipe-detail/recipe-detail.component.ts
@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+
+import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-detail',
@ -6,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./recipe-detail.component.css']
 })
 export class RecipeDetailComponent implements OnInit {
+  @Input() recipe: Recipe;

  constructor() { }

--- a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
+++ b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.html
@ -1,6 +1,7 @@
 <a
-href="#"
-class="list-group-item clearfix">
+  href="#"
+  class="list-group-item clearfix"
+  (click)="onSelected()">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <p class="list-group-item-text">{{ recipe.description }}</p>
--- a/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
+++ b/project/src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts
@ -1,4 +1,5 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
+
 import { Recipe } from '../../recipe.model';

@Component({
@ -8,10 +9,15 @@ import { Recipe } from '../../recipe.model';
 })
 export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;
+  @Output() recipeSelected = new EventEmitter<void>();

  constructor() { }

  ngOnInit() {
  }

+  onSelected() {
+    this.recipeSelected.emit();
+  }
+
 }
--- a/project/src/app/recipes/recipe-list/recipe-list.component.html
+++ b/project/src/app/recipes/recipe-list/recipe-list.component.html
@ -7,8 +7,9 @@
 <div class="row">
  <div class="col-xs-12">
    <app-recipe-item
-      *ngFor="let recipeElement of recipes"
-      [recipe]="recipeElement"></app-recipe-item>
+      *ngFor="let recipeEl of recipes"
+      [recipe]="recipeEl"
+      (recipeSelected)="onRecipeSelected(recipeEl)"></app-recipe-item>
  </div>
 </div>

--- a/project/src/app/recipes/recipe-list/recipe-list.component.ts
+++ b/project/src/app/recipes/recipe-list/recipe-list.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';

 import { Recipe } from '../recipe.model';

@ -8,9 +8,10 @@ import { Recipe } from '../recipe.model';
  styleUrls: ['./recipe-list.component.css']
 })
 export class RecipeListComponent implements OnInit {
+  @Output() recipeWasSelected = new EventEmitter<Recipe>();
  recipes: Recipe[] = [
    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg'),
-    new Recipe('A Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
+    new Recipe('Another Test Recipe', 'This is simply a test', 'https://upload.wikimedia.org/wikipedia/commons/1/15/Recipe_logo.jpeg')
  ];

  constructor() { }
@ -18,4 +19,8 @@ export class RecipeListComponent implements OnInit {
  ngOnInit() {
  }

+  onRecipeSelected(recipe: Recipe) {
+   this.recipeWasSelected.emit(recipe);
+  }
+
 }
--- a/project/src/app/recipes/recipes.component.html
+++ b/project/src/app/recipes/recipes.component.html
@ -1,8 +1,14 @@
 <div class="row">
  <div class="col-md-5">
-    <app-recipe-list></app-recipe-list>
+    <app-recipe-list
+      (recipeWasSelected)="selectedRecipe = $event"></app-recipe-list>
  </div>
  <div class="col-md-7">
-    <app-recipe-detail></app-recipe-detail>
+    <app-recipe-detail
+      *ngIf="selectedRecipe; else infoText"
+      [recipe]="selectedRecipe"></app-recipe-detail>
+    <ng-template #infoText>
+      <p>Please select a Recipe!</p>
+    </ng-template>
  </div>
 </div>
--- a/project/src/app/recipes/recipes.component.ts
+++ b/project/src/app/recipes/recipes.component.ts
@ -1,11 +1,14 @@
 import { Component, OnInit } from '@angular/core';

+import { Recipe } from './recipe.model';
+
@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css']
 })
 export class RecipesComponent implements OnInit {
+  selectedRecipe: Recipe;

  constructor() { }

--- a/project/src/app/shopping-list/shopping-edit/shopping-edit.component.html
+++ b/project/src/app/shopping-list/shopping-edit/shopping-edit.component.html
@ -4,16 +4,24 @@
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Name</label>
-          <input type="text" id="name" class="form-control">
+          <input
+            type="text"
+            id="name"
+            class="form-control"
+            #nameInput>
        </div>
        <div class="col-sm-2 form-group">
          <label for="amount">Amount</label>
-          <input type="number" id="amount" class="form-control">
+          <input
+            type="number"
+            id="amount"
+            class="form-control"
+            #amountInput>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
-          <button class="btn btn-success" type="submit">Add</button>
+          <button class="btn btn-success" type="submit" (click)="onAddItem()">Add</button>
          <button class="btn btn-danger" type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
--- a/project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
+++ b/project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts
@ -1,4 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ElementRef,
+  ViewChild,
+  EventEmitter,
+  Output
+} from '@angular/core';
+
+import { Ingredient } from '../../shared/ingredient.model';

@Component({
  selector: 'app-shopping-edit',
@ -6,10 +15,20 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./shopping-edit.component.css']
 })
 export class ShoppingEditComponent implements OnInit {
+  @ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;
+  @ViewChild('amountInput', { static: false }) amountInputRef: ElementRef;
+  @Output() ingredientAdded = new EventEmitter<Ingredient>();

  constructor() { }

  ngOnInit() {
  }

+  onAddItem() {
+    const ingName = this.nameInputRef.nativeElement.value;
+    const ingAmount = this.amountInputRef.nativeElement.value;
+    const newIngredient = new Ingredient(ingName, ingAmount);
+    this.ingredientAdded.emit(newIngredient);
+  }
+
 }
--- a/project/src/app/shopping-list/shopping-list.component.html
+++ b/project/src/app/shopping-list/shopping-list.component.html
@ -1,6 +1,7 @@
 <div class="row">
  <div class="col-xs-10">
-    <app-shopping-edit></app-shopping-edit>
+    <app-shopping-edit
+      (ingredientAdded)="onIngredientAdded($event)"></app-shopping-edit>
    <hr>
    <ul class="list-group">
      <a
--- a/project/src/app/shopping-list/shopping-list.component.ts
+++ b/project/src/app/shopping-list/shopping-list.component.ts
@ -18,4 +18,7 @@ export class ShoppingListComponent implements OnInit {
  ngOnInit() {
  }

+  onIngredientAdded(ingredient: Ingredient) {
+    this.ingredients.push(ingredient);
+  }
 }