FILES

a
a
a
a
app.component.html

a
app.module.ts

a
a
REGISTER
LOGIN
HOME-PROFILE
USER-PROIFLE
SERVICES
MODELS

MODELS
user.model.ts

app-routing.module.ts

app.component.html

register.component.html
app.module.ts
register.component.ts
register.component.html
register.component.ts
app.module.ts

auth.service.ts
app.modulet.s
register.component.ts

login.component.html
app.module.ts
login.component.ts
register.component.html

login.component.ts

app.module.ts

auth.service.ts
login.component.ts

home-profile.service.ts
app.module.ts
home-profile.service.ts

home-profile.component

app.module.ts
user-profile.service.ts

user-profile.component.

home-profile.component
user-profile.component.
user.controller.js
user.controller.js

register.component.ts
login.component.ts

register.component.ts
login.component.ts

auth.guard.ts
auth.service.ts
auth.guard.ts
app.module.ts
app-routing.module.ts

token-interceptor.service
app.module.ts
auth.service.ts
token-interceptor.service

user.routes.js
user.routes.js

special-events.componen

app.component.ts
app.component.html
auth.service.ts
auth.service.ts

SUGGESTIONS

Encrypt Passport
Do not return the password
Improve Registration
if email already exitst
Add erro handling
Create a new event
Where user can can create new event
Fetch events from the database instead of being hardcoded
Events created by a specific user

Role Base Authoerization

Admin
User
Moderator
Null

Angular 7 | Limiting CRUD Functionality to Admin User Role Only

https://www.youtube.com/watch?v=H_K1bdHpFgI
 LOGIN SYSTEM
BASIC
PreRequisite: Node Js and NPM
FRONTEND - ANGULAR
How create, Angular Project. In case you already created Main FOLDER and backend Project.
Angular Installation
to change the Port and use watch - instead ng serve use npm start on Terminal
Let's install bootstrap, npm install bootstrap@3 --save - Version 3 Used for this Tutorial
In angular.json in styles array add the boostrap path
Just to check if Bootsrap is working add this on app.component.html
In Command Prompt>cd to Main Project Folder>then code .
Standard Setup - Angular : After Successful Installation
Add FormsModule Typescript Form Feature in app.moude.ts to use 2 Way Data Binding in Angular
Delete all code in app.component.html - let’s stat fresh…
ng generate - SCHEMATIC COMMANDS
https://angular.io/cli/generate
CREATING COMPONENTS
Create Header Component ng generate component header --skipTests true
Use the HeaderComponent in app.component.html
If Header Component has been done manually. You have to register it manually in app.module.ts
Create RecipesComponent inside the App Folder ng generate component recipes --skipTests true
Create RecipeListComponent inside recipes Folder ng g c recipes/recipe-list --skipTests true
Create RecipeDetailComponent inside recipes Folder ng g c recipes/recipe-detail --skipTests true
Create RecipeItemComponent inside recipe-list Component ng g c recipes/recipe-list/recipe-item --skipTests true
Create a ShoppingListComponent in the App Folder ng g c shopping-list --skipTests true
Create ShoppingEditComponent inside the ShoppingListComponent ng g c shopping-list/shopping-edit --skipTests true

USING COMPONENTS
In app.component.html let's add <app-recipes></app-recipes> and <app-shopping-list></app-shopping-list> Component
In recipes.component.html lets add <app-recipe-list></app-recipe-list> and <app-recipe-detail></app-recipe-detail>
In recipe-list.component.html, let add <app-recipe-item></app-recipe-item> component
In shopping-list-component.html, lets add <app-shopping-edit></app-shopping-edit> Component
 HEADER COMPONENT
In header.component.html - Lets work on the navigation bar
RECIPE-LIST COMPONENT
Let's add array of recipes = []; in recipe-list.component.ts
CREATING RECIPE MODEL
Let's create recipe model in recipes Folder path ng g class recipe --type=model
Let's create the Blueprint of our recipe model. This is how our recipe should look like.
Remarks
model is a blueprint of an object we create. No need decorator.
constructor () is built in function that every class has. It is being initiated once we created a new instance of our class.
in this example it's our Recipe class in recipe.model.ts
recipe-list COMPONENT
in recipe-list.component.ts - Base on the blueprint we created, let create a new Recipe object in an array.
in recipe-list.component.html - this how will look like our RecipeList in the Browser
in recipe.list.component.html - let's add String Interpolation and Property Binding
Let's duplicate Recipe Object in recipe-list.component.ts
Remarks
This is where we are displaying the list of Recipe Name, Desc, and Image
RecipeDetail COMPONENT - HTML
In recipe-detail.component.html
ShoppingList COMPONENT HTML
In shopping-list.component.html
ShoppingList COMPONENT - TYPESCRIPT
In shopping-list.component.ts - simply added ingredients[]
CREATING INGREDIENT MODEL
Let's create ingredients model in app Folder path ng g class ingredient --type=model
In ingredient.model.ts - Blueprint of our ingredient Model
ShoppingList COMPONENT - TYPESCRIPT
in shopping-list.component.ts - Creating the Shopping List
in shopping-list.component.html - Let's output the Shopping List
ShoppingEdit COMPONENT - HTML
in shopping-edit.component.hmtl - UI for our ShoppingEdit C
Components and Data Binding
Adding navigation with Event Binding and ngIf
Passing Recipe Data with Property Binding
Passing Data with Event and Property Binding (Combined)
Allowing the User to Add Ingredients to the Shopping List
 Directive
Building and Using a Dropdown Directive
Services & Dependency Injection
Setttingup Services
Managing Recipes in a Recipe Service
Using
Adding a Service for Cross-Component
the Shopping List Service Communication
Using Services for Pushing Data from A to B
Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (via a Service)

Course Project - Routing - something wrong I have done on app.componet.html header section.
Setting Up Routes for our Main Routes
Adding Navigation to the App
Marking Active Routes
Fixing the
Adding Reload
Child Issues
Routing Together - Error

0
 in model Folder, go to user.model.ts. Let's create the Blue Print of our user
ng generate component register
ng generate component login
ng generate component HomeProfile
ng generate component UserProfile
ng g s services/user
ng g class models/user --type=model
CREATE the BLUEPRINT of our USER
MODELS Folder
in model Folder, go to user.model.ts. Let's create the Blue Print of our user
ADDING ROUTES
Adding routes for all of our component

PATH - in app.routing.module.ts - FRONTEND

PATH register
PATH login
PATH homeprofile
PATH userprofile

ADDING BOOSTRAP JS AND CSS MANUALLY in INDEX.HTML

NAVIGATION BAR - INTERFACE

Directly we are adding our navigation bar in app.component.html

REGISTER - USER INTERFACE

Register UI
We'll use 2 Way Data Binding in our input - add FormsModule in app.moude.ts
Let' add registerUserData = {} in register.component.ts
Add 2 Way Binding in our input or Ng Directive - [(ngModel)]
Adding the method for our Button to get the data and log to the console.
Connecting Front End to Back End API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
adding HTTP module in app.module.ts
CREATE SERVICE - for REGISTER API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
Add auth.service module in our app.module.ts
Using auth.servce.ts to our register.component.ts file

LOGIN - USER INTERFACE

Login UI
We'll use 2 Way Data Binding in our input - add FormsModule in app.moude.ts - ALREADY DONE
Let' add loginUserData = {} in login.component.ts
Add 2 Way Binding in our input or Ng Directive - [(ngModel)]
Remarks: We arleady added 2 Way Binding as we copy and edit it from register UI
Adding the method for our Button to get the data and log to the console.
Remarks: Define a loginUser() Method in the login.component.ts
Connecting Front End to Back End API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
adding HTTP module in app.module.ts - ALREADY DONE PREVIEWSLY
CREATE SERVICE - for LOGIN API
We will be using the same auth.service.ts, this service has already been added to app.module.ts
Login Service
Use auth.service.ts to our login.component.ts file
Run your Backend and FrontEnd Server, Try register: http://localhost:4200/login

SERVICE FOR HOME PROFILE

Create separate HomeProfile service for HomeProfileComponent
add the HomeProfileService in app.module
Create Http Call to the backend API to fetch the HomeProfile data
Subscribe to Observables in our home-profille.components.ts
Import and inject our HomeProfileService in home-profile.component.ts - Subscribe to Observables

SERVICE for USERPROFILE

Create separate UserProfile service for UserProfileComponent
add the UserProfileService in app.module
Create Http Call to the backend API to fetch the UserProfile data
Subscribe to Observables in our home-profille.components.ts
Import and inject our HomeProfileService in home-profile.component.ts - Subscribe to Observables

USER INTERFACE - HOMEPROFILE & USER-PROFILE

Create the UI for the events.component.html
Create the UI for special-events.component.html
 Only Athenticated User - Should Navigate to our Special Event
AUTHENTICATION OVERVIEW
BACKEND: Generating JWT in the back-end
Generating JWT in the back-end for our register API
Generating JWT in the back-end for our authenticate API
Test our json webtoken, run your frontend and backend, and try to login and see the console.
FRONT END: STORING JWT
Storing JWT in the front-end
Storing JWT in the front-end
Let's test it out.
NAVIGATE AUTHENTICATED USERS TO USERPROFILE VIEW
Let's navigate the authenticated user to the userprofile View
Let's navigate the authenticated user to the userprofile View

Install Route Guard

Create a method if token exist or not in the auth.service.ts
Let's use the me loggedIn() method to control our navigation in auth.guard.ts
import the AuthGuard in app.module.ts
Adding canActivate: [AuthGuard], in our special event path
Before you test the routeguard, delete the Token first in the Local Storage

Creating a Token Interceptor - To verify our Token

Let's add this token-intereptor.service.ts in our app.module.ts
Let's send the actual Token instead of the Hard Coded Token
Let's update our token-interceptor.service.ts to create a real Token Interceptor
Let's send the Token to the server. Let's test it if working

IN THE BACKEND - Middleware to Verify Token

in routes Folder>user.routes.js Create verifyToken Middleware Function
In special events API just add verifyToken
IN THE FRONT END - special-events.compoent.ts
Let's handle token verificate error better.

Implementing logout:
Implementing logout: used ngIf on the register and login button, and add logout button
Implementing logout: let's define the logoutUser() method in auth.service.ts
Implementing logout: Update our logoutUser() method

n the password
can can create new event
from the database instead of being hardcoded
ed by a specific user

thoerization

imiting CRUD Functionality to Admin User Role Only

.youtube.com/watch?v=H_K1bdHpFgI
 STEPS STEPS

INFO INFO

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
INFO INFO
STEPS STEPS

STEPS STEPS
INFO INFO

STEPS STEPS
STEPS STEPS
INFO INFO
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
ipTests true STEPS STEPS

> Component STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
sTEPS sTEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS
INFO INFO

STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS

STEPS STEPS
STEPS STEPS

STEPS STEPS

STEPS STEPS
STEPS STEPS
STEPS STEPS
STEPS STEPS
 FLOW
BASIC
PreRequisite: Node Js and NPM
FRONTEND - ANGULAR
How create, Angular Project. In case you already created Main FOLDER and backend Project.
Install Angular
to change the Port and use watch - instead ng serve use npm start on Terminal
Let's install bootstrap, npm install bootstrap@3 --save - Version 3 Used for this Tutorial
In angular.json in styles array add the boostrap path
Just to check if Bootsrap is working add this on app.component.html
In Command Prompt>cd to Main Project Folder>then code .
Standard Setup - Angular : After Successful Installation
Add FormsModule Typescript Form Feature in app.moude.ts to use 2 Way Data Binding in Angular
Delete all code in app.component.html - let’s stat fresh…
ng generate - SCHEMATIC COMMANDS
a
CREATING COMPONENTS
Create Header Component ng generate component header --skipTests true
Use the HeaderComponent in app.component.html

Create RecipesComponent inside the App Folder ng generate component recipes --skipTests true
Create RecipeListComponent inside recipes Folder ng g c recipes/recipe-list --skipTests true
Create RecipeDetailComponent inside recipes Folder ng g c recipes/recipe-detail --skipTests true
Create RecipeItemComponent inside recipe-list Component ng g c recipes/recipe-list/recipe-item --skipTests true
Create a ShoppingListComponent in the App Folder ng g c shopping-list --skipTests true
Create ShoppingEditComponent inside the ShoppingListComponent ng g c shopping-list/shopping-edit --skipTests true

USING COMPONENTS
In app.component.html let's add <app-recipes></app-recipes> and <app-shopping-list></app-shopping-list> Component
In recipes.component.html lets add <app-recipe-list></app-recipe-list> and <app-recipe-detail></app-recipe-detail>
In recipe-list.component.html, let add <app-recipe-item></app-recipe-item> component
In shopping-list-component.html, lets add <app-shopping-edit></app-shopping-edit> Component
 HEADER COMPONENT
In header.component.html - Lets work on the navigation bar
RECIPE-LIST COMPONENT
Let's add array of recipes = []; in recipe-list.component.ts
CREATING RECIPE MODEL
Let's create recipe model in recipes Folder path ng g class recipe --type=model
Let's create the Blueprint of our recipe model. This is how our recipe should look like.
Remarks
model is a blueprint of an object we create. No need decorator.
constructor () is built in function that every class has. It is being initiated once we created a new instance of our class.
in this example it's our Recipe class in recipe.model.ts
recipe-list COMPONENT
in recipe-list.component.ts - Base on the blueprint we created a new Recipe object in an array.
in recipe-list.component.html - this how will look like our RecipeList in the Browser
in recipe.list.component.html - let's add String Interpolation and Property Binding
Let's duplicate Recipe Object in recipe-list.component.ts
Remarks
This is where we are displaying the list of Recipe Name, Desc, and Image
RecipeDetail COMPONENT
In recipe-detail.component.html
ShoppingList COMPONENT HTML
In shopping-list.component.html
ShoppingList COMPONENT
In shopping-list.component.ts - simply added ingredients[]
CREATING INGREDIENT MODEL
Let's create ingredients model in app Folder path ng g class ingredient --type=model
In ingredient.model.ts - Blueprint of our ingredient Model
ShoppingList COMPONENT - TYPESCRIPT
in shopping-list.component.ts
in shopping-list.component.html - Let's output the Shopping List
ShoppingEdit COMPONENT - HTML
in shopping-edit.component.hmtl - UI for our ShoppingEdit C
Components and Data Binding
Adding navigation with Event Binding and ngIf
Passing Recipe Data with Property Binding
Passing Data with Event and Property Binding (Combined)
Allowing the User to Add Ingredients to the Shopping List
 Directive
Building and Using a Dropdown Directive
Services & Dependency Injection
Setttingup Services
Managing Recipes in a Recipe Service
Using
Adding a Service for Cross-Component
the Shopping List Service Communication
Using Services for Pushing Data from A to B
Adding Ingredients to Recipes

Passing Ingredients from Recipes to the Shopping List (via a Service)

Course Project - Routing
Setting Up Routes for our Main Routes
Adding Navigation to the App
Marking Active Routes
Fixing the
Adding Reload
Child Issues
Routing Together
ng generate component register
ng generate component login
ng generate component HomeProfile
ng generate component UserProfile
ng g s services/user
ng g class models/user --type=model

ADDING ROUTES
Adding routes for all of our component in app-routing.module.ts

API - BACKEND ROUTE

POST localhost:3000/api/register
POST localhost:3000/api/authenticate
GET localhost:3000/api/homeprofile
GET localhost:3000/api/userprofile

ADDING BOOSTRAP JS AND CSS MANUALLY in INDEX.HTML

a
NAVIGATION BAR - INTERFACE
Directly we are adding our navigation bar in app.component.html
a
REGISTER - USER INTERFACE
Register UI
We'll use 2 Way Data Binding in our input - add FormsModule in app.moude.ts
Let' add registerUserData = {} in register.component.ts
Add 2 Way Binding in our input or Ng Directive - [(ngModel)]
Adding the method for our Button to get the data and log to the console.
Connecting Front End to Back End API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
adding HTTP module in app.module.ts
CREATE SERVICE - for REGISTER API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
Add auth.service module in our app.module.ts
Using auth.servce.ts to our register.component.ts file
a
Run your Backend and FrontEnd Server, Try register: http://localhost:4200/register
a
LOGIN - USER INTERFACE
Login UI
We'll use 2 Way Data Binding in our input - add FormsModule in app.moude.ts - ALREADY DONE
Let' add loginUserData = {} in login.component.ts
Add 2 Way Binding in our input or Ng Directive - [(ngModel)]
Remarks: We arleady added 2 Way Binding as we copy and edit it from register UI
Adding the method for our Button to get the data and log to the console.
Remarks: Define a loginUser() Method in the login.component.ts
Connecting Front End to Back End API
Remarks: service for register will be responsible for making HTTP Calls to the backend.
adding HTTP module in app.module.ts - ALREADY DONE PREVIEWSLY
CREATE SERVICE - for LOGIN API
We will be using the same auth.service.ts, this service has already been added to app.module.ts
Login Service, we used our authenticate route for our backend api.
Use auth.service.ts to our login.component.ts file
TEST: http://localhost:4200/login
a
a
a
HOME
Create separate event service for events
add the EventService in app.module
Create Http Call to the backend API to fetch the events data
Subscribe to Observables in our home-profille.components.ts
Import and inject our HomeProfileService in home-profile.component.ts - Subscribe to Observables
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NOT DONE
NAVIGATE AUTHENTICATED USERS TO USERPROFILE VIEW
 Not used.

pTests true

--skipTests true

edit --skipTests true

ping-list> Component
p-recipe-detail>
tance of our class.
POST localhost:3000/api/authenticate
GET localhost:3000/api/homeprofile
GET localhost:3000/api/userprofile
Getting an Error from Here…unable to register login and view members path

AuthService changed to public as it cant be detected by app.component.html

d view members path

y app.component.html
App Component
<app-header></app-header>

<app-recipes></app-recipes>
<app-recipe-list></app-recipe-list>
<app-recipe-item></app-recipe-item>
<app-recipe-detail></app-recipe-detail>

<app-shopping-list></app-shopping-list> Component
<app-shopping-edit></app-shopping-edit>

RECIPES COMPONENT
SHOPPINGLIST COMPONENT
Passing Recipe Data with Property Binding

Remarks
Below recipe-list will be remove from recipe-list.componenet.html, and we are going to move it in recipe-item.component.html
 SETUP STEP
PreRequisite: Node Js and NPM INFO
Angular first time installation. SETUP
How create, Angular Project. In case you already created Main FOLDER and backend Project. SETUP
To change the Port and use watch - instead ng serve use npm start on Terminal SETUP
Let's install bootstrap, npm install bootstrap@3 --save - Version 3 Used for this Tutorial SETUP
In angular.json in styles array add the boostrap path SETUP
Open your angular project using Visual Studio Code SETUP
Standard Setup - Angular : After Successful Installation INFO
Add FormsModule Typescript Form Feature in app.moude.ts to use 2 Way Data Binding in Angular SETUP
Delete all code in app.component.html - let’s stat fresh… INFO
ng generate - SCHEMATIC COMMANDS INFO
CREATING COMPONENTS
Create header Component SETUP

Create recipes Component inside the App Folder SETUP

Create recipe-list Component inside recipes Folder SETUP
Create recipe-item Component inside recipe-list Component SETUP
Create recipe-detail Component inside recipes Folder SETUP

Create a shopping-list Component in the App Folder SETUP

Create shopping-edit Component inside the shopping-list Component SETUP

USING COMPONENTS
Use header Component in app.component.html SETUP
If header Component has been done manually. You have to register it manually in app.module.ts INFO
Use recipes Component and shopping-list Component in app.component.html SETUP
Use recipe-list and recipe-detail Component in recipes.component.html SETUP
Use recipe-item Component in recipe-list.component.html SETUP
Use shopping-edit Component in shopping-list-component.html SETUP
Remarks
App Component is our root Component
We have 3 parent Components here and it has child components
HEADER COMPONENT NAVIGATION BAR
Adding Navigation Bar in our header Component STEP

RECIPE MODEL or BLUEPRINT

Create a Model or Blueprint for our recipe STEP
Let's create the Blueprint of our recipe model. This is how our recipe should look like. STEP
DISPLAYING LIST of RECIPE in RECIPE-LIST COMPONENT
Base on the blueprint we created, let create a new Recipe object in an array. STEP
in recipe-list.component.html - this how will look like our RecipeList in the Browser STEP
in recipe.list.component.html - let's add String Interpolation and Property Binding STEP
Remarks
This is where we are displaying the list of Recipe Name, Desc, and Image
RECIPE-DETAIL USER INTERFACE
We'll work on UI or HTML of our recipe-detail Componenent STEPS

CREATE INGREDIENT MODEL for our SHOPPING-LIST

Let's create ingredient model in app Folder path STEPS
Let's create the Blueprint of our ingredient model. This is how our ingredient should look like. STEP
CREATE an INSTANCE of our NEW INGREDIENT in our SHOPPING-LIST
Create an instance of our new ingredient in our shopping-list.component.ts STEPS
SHOPPING-LIST USER INTERFACE
Let's work on shopping-list.component.html, loop our ingredient and add string interpolation. STEP
SHOPPING-EDIT COMPONENT USER INTERFACE
Let's work on shopping-edit.component.html User Inteface STEP

Components and Data Binding

Adding navigation with Event Binding and ngIf STEP
Passing Recipe Data with Property Binding STEP
Passing Data with Event and Property Binding (Combined) STEPS
 STEP CONCEPT FILES FILES FILES
INFO
SETUP
SETUP
SETUP
SETUP
SETUP
SETUP
INFO
SETUP
INFO
INFO

SETUP

SETUP
SETUP
SETUP
SETUP

SETUP
SETUP

SETUP app.component.html
INFO app.module.ts
SETUP app.component.html
SETUP recipes.component.html
SETUP recipe-list.component.html
SETUP shopping-list.component.html
STEP header.component.html

STEP recipe.model.ts
STEP recipe.model.ts

STEP recipe-list.component.ts
STEP recipe-list.component.html
STEP recipe-list.component.html

STEPS recipe-detail.component.html

STEPS
STEP ingredient.model.ts

STEPS shopping-list.component.ts

STEP shopping-list.component.html

STEP shopping-edit.component.html

STEP header.component.hml header.component.ts app.component.html

STEP recipe-list.component.html recipe-item.component.html recipe-item.component.ts
FILES FILES FILES
app.component.ts
recipe.model.ts
HEADER COMPONENT
1 NAVIGATION BAR

2 DISPLAYING LIST of RECIPE in RECIPE-LIST COMPONENT

3 RECIPE-DETAIL USER INTERFACE

4 SHOPPING-LIST USER INTERFACE

5 SHOPPING-LIST COMPONENT UPDATED UI

6 SHOPPING-EDIT COMPONENT USER INTERFACE