Angular course from Udemy - project to create an app with a recipe book and shopping list
*** Note: to open web links in a new window use: ctrl+click on link**
The course project is a recipe/shopping list app and it takes input from the following sections of the course:
. .
ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.ng test
to execute the unit tests via Karma.ng e2e
to execute the end-to-end tests via Protractor.<!-- Display recipe image -->
<div class="row">
<div class="col-xs-12">
<img
[src]="(recipeState | async).recipes[id].imagePath"
alt="{{ (recipeState | async).recipes[id].name }}"
class="img-responsive"
style="max-height: 300px;">
</div>
</div>
<!-- display recipe name as heading -->
<div class="row">
<div class="col-xs-12">
<h1>{{ (recipeState | async).recipes[id].name }}</h1>
</div>
</div>
<!-- dropdown button menu with 3 options listed -->
<div class="row">
<div class="col-xs-12">
<div
class="btn-group"
appDropdown>
<button
type="button"
class="btn btn-primary dropdown-toggle">
Manage Recipe <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a (click)="onAddToShoppingList()" style="cursor: pointer;">To Shopping List</a></li>
<li><a style="cursor: pointer;" (click)="onEditRecipe()">Edit Recipe</a></li>
<li><a style="cursor: pointer;" (click)="onDeleteRecipe()">Delete Recipe</a></li>
</ul>
</div>
</div>
</div>
<!-- display recipe description and list of ingredients - name and amount -->
<div class="row">
<div class="col-xs-12">
{{ (recipeState | async).recipes[id].description }}
</div>
</div>
<div class="row">
<div class="col-xs-12">
<ul class="list-group">
<li
class="list-group-item"
*ngFor="let ingredient of (recipeState | async).recipes[id].ingredients">
{{ ingredient.name }} - {{ ingredient.amount }}
</li>
</ul>
</div>
</div>