diff --git a/project/src/app/app.component.html b/project/src/app/app.component.html index dab2166..a2fe6f3 100644 --- a/project/src/app/app.component.html +++ b/project/src/app/app.component.html @@ -1,4 +1,4 @@ - +
diff --git a/project/src/app/app.component.spec.ts b/project/src/app/app.component.spec.ts deleted file mode 100644 index c136a0b..0000000 --- a/project/src/app/app.component.spec.ts +++ /dev/null @@ -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!'); - }); -}); diff --git a/project/src/app/app.component.ts b/project/src/app/app.component.ts index 06499a0..767f161 100644 --- 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; } } diff --git a/project/src/app/app.module.ts b/project/src/app/app.module.ts index 6685335..76fe72d 100644 --- 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,9 +22,10 @@ import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-ed ShoppingEditComponent ], imports: [ - BrowserModule + BrowserModule, + FormsModule, ], providers: [], bootstrap: [AppComponent] }) -export class AppModule { } +export class AppModule { } \ No newline at end of file diff --git a/project/src/app/header/header.component.html b/project/src/app/header/header.component.html index 9c8ddbc..c8df7dc 100644 --- a/project/src/app/header/header.component.html +++ b/project/src/app/header/header.component.html @@ -5,15 +5,15 @@
diff --git a/project/src/app/header/header.component.ts b/project/src/app/header/header.component.ts index 91e6ec5..c2fdea1 100644 --- 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(); @@ -11,5 +10,4 @@ export class HeaderComponent { onSelect(feature: string) { this.featureSelected.emit(feature); } - -} +} \ No newline at end of file diff --git a/project/src/app/recipes/recipe-detail/recipe-detail.component.html b/project/src/app/recipes/recipe-detail/recipe-detail.component.html index 9af1626..a3f0ac1 100644 --- 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 @@
- + {{ recipe.name }}
-

Recipe Name

+

{{ recipe.name }}

@@ -26,7 +30,7 @@
- Description + {{ recipe.description }}
diff --git a/project/src/app/recipes/recipe-detail/recipe-detail.component.ts b/project/src/app/recipes/recipe-detail/recipe-detail.component.ts index 87cba8f..d36e5b4 100644 --- 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() { } diff --git 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 index 2a0caf3..fb7c8e4 100644 --- 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,15 +1,16 @@ + href="#" + class="list-group-item clearfix" + (click)="onSelected()">

{{ recipe.name }}

{{ recipe.description }}

- {{ recipe.name }} - + {{ recipe.name }} + \ No newline at end of file diff --git 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 index 937b97b..6d132d9 100644 --- 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(); constructor() { } ngOnInit() { } + onSelected() { + this.recipeSelected.emit(); + } + } diff --git a/project/src/app/recipes/recipe-list/recipe-list.component.html b/project/src/app/recipes/recipe-list/recipe-list.component.html index acc2826..a7587a9 100644 --- a/project/src/app/recipes/recipe-list/recipe-list.component.html +++ b/project/src/app/recipes/recipe-list/recipe-list.component.html @@ -6,9 +6,10 @@
- +
diff --git a/project/src/app/recipes/recipe-list/recipe-list.component.ts b/project/src/app/recipes/recipe-list/recipe-list.component.ts index 9ff59dc..c401288 100644 --- 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(); 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); + } + } diff --git a/project/src/app/recipes/recipes.component.html b/project/src/app/recipes/recipes.component.html index 10369a3..36b8d6d 100644 --- a/project/src/app/recipes/recipes.component.html +++ b/project/src/app/recipes/recipes.component.html @@ -1,8 +1,14 @@
- +
- + + +

Please select a Recipe!

+
diff --git a/project/src/app/recipes/recipes.component.ts b/project/src/app/recipes/recipes.component.ts index c60423c..414eff1 100644 --- 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() { } diff --git a/project/src/app/shopping-list/shopping-edit/shopping-edit.component.html b/project/src/app/shopping-list/shopping-edit/shopping-edit.component.html index be6aeb9..d8b8b98 100644 --- 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 @@
- +
- +
- +
diff --git a/project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts b/project/src/app/shopping-list/shopping-edit/shopping-edit.component.ts index 19edfff..30ba85d 100644 --- 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(); 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); + } + } diff --git a/project/src/app/shopping-list/shopping-list.component.html b/project/src/app/shopping-list/shopping-list.component.html index 87188f1..f8921ff 100644 --- a/project/src/app/shopping-list/shopping-list.component.html +++ b/project/src/app/shopping-list/shopping-list.component.html @@ -1,6 +1,7 @@
- +