Skip to content

Commit b6d259a

Browse files
makeit7makeit7
committed
Angular second
1 parent 20fb517 commit b6d259a

8 files changed

Lines changed: 37 additions & 27 deletions

File tree

‎src/app/app.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<app-header></app-header>
1+
<app-header (featureSelected)="onNavigate($event)"></app-header>
22
<div class="container">
33
<div class="row">
44
<div class="col-md-12">
5-
<app-recipes></app-recipes>
6-
<app-shopping-list></app-shopping-list>
5+
<app-recipes *ngIf="loadedFeature === 'recipe'"></app-recipes>
6+
<app-shopping-list *ngIf="loadedFeature !== 'recipe'"></app-shopping-list>
77
</div>
88
</div>
99
</div>

‎src/app/app.component.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,8 @@ import { Component } from '@angular/core';
66
styleUrls: ['./app.component.css']
77
})
88
export class AppComponent {
9-
title = 'Does this change';
9+
loadedFeature = 'recipe';
10+
onNavigate(feature: string) {
11+
this.loadedFeature = feature;
12+
}
1013
}

‎src/app/header/header.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
</div>
66
<div class="collapse navbar-collapse">
77
<ul class="nav navbar-nav">
8-
<li><a href="#">Recipes</a></li>
9-
<li><a href="#">Shopping list</a></li>
8+
<li><a href="#" (click)="onSelect('recipe')">Recipes</a></li>
9+
<li><a href="#" (click)="onSelect('shoping-list')">Shopping list</a></li>
1010
</ul>
1111
<ul class="nav navbar-right">
1212
<li class="dropdown">

‎src/app/header/header.component.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import { Component } from '@angular/core';
1+
import {Component, EventEmitter, Output} from '@angular/core';
22

33
@Component({
44
selector: 'app-header',
55
templateUrl: './header.component.html'
66
})
77
export class HeaderComponent {
8+
@Output() featureSelected = new EventEmitter<string>();
9+
10+
onSelect(feature: string){
11+
this.featureSelected.emit(feature);
12+
}
813

914
}

‎src/app/recipes/recipe-list/recipe-item/recipe-item.component.html‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
1-
<p>
2-
recipe-item works!
3-
</p>
1+
<a href="#"
2+
class="list-group-item clearfix">
3+
<div class="pull-left">
4+
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
5+
<p class="list-group-item-text">{{ recipe.description }}</p>
6+
</div>
7+
<span class="pull-right">
8+
<img
9+
[src]="recipe.imagePath"
10+
alt="{{ recipe.name }}"
11+
class="img-responsive"
12+
style="max-height: 50px;">
13+
</span>
14+
</a>

‎src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
import { Component, OnInit } from '@angular/core';
1+
import {Component, Input, OnInit} from '@angular/core';
2+
import {Recipe} from '../../recipe.model';
23

34
@Component({
45
selector: 'app-recipe-item',
56
templateUrl: './recipe-item.component.html',
67
styleUrls: ['./recipe-item.component.css']
78
})
89
export class RecipeItemComponent implements OnInit {
9-
10+
@Input() recipe: Recipe;
1011
constructor() { }
1112

1213
ngOnInit() {

‎src/app/recipes/recipe-list/recipe-list.component.html‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,10 @@
88
<hr>
99
<div class="row">
1010
<div class="col-xs-12">
11-
<a href="#" class="list-group-item clearfix"
12-
*ngFor="let recipe of recipes">
13-
<div class="pull-left">
14-
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
15-
<p class="list-group-item-text">{{ recipe.description }}</p>
16-
</div>
17-
<span class="pull-right">
18-
<img [src]="recipe.imagePath"
19-
alt="{{ recipe.name }}"
20-
class="img-responsive"
21-
style="max-height: 50px;">
22-
</span>
23-
</a>
24-
<app-recipe-item></app-recipe-item>
11+
<app-recipe-item
12+
*ngFor="let recipeEl of recipes"
13+
[recipe]="recipeEl"
14+
></app-recipe-item>
2515
</div>
2616
</div>
2717

‎src/app/shopping-list/shopping-list.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
style="cursor: pointer"
99
*ngFor="let ingredient of ingredients"
1010
>
11-
{{ ingredient.name }} ({{ Kingredient.amount }})
11+
{{ ingredient.name }} ({{ ingredient.amount }})
1212
</a>
1313
</ul>
1414
</div>

0 commit comments

Comments
 (0)