Step-1 : Angular Project Setup

================================

1) Download and install VsCode IDE

2) Setup Angular Environment

3) Create Angular Application

$ ng new ashokit_ecomm_frontend

4) Run angular application

$ cd ashokit_ecomm_frontend
$ ng serve --open

Note: By default app-component will be loaded.

=================================================================
Step-2 : Retrieve Products From Backend and Display In Frontend
=================================================================

## 1) Create Product class to bind backend-app response in frontend-app

$ ng generate class common/Product

export class Product {

constructor(
public id: number,
public name: string,
public title: string,
public description: string,
public unitPrice: number,
public imageUrl: string,
public active: boolean,
public unitsInStock: number,
public dateCreated: Date,
public lastUpdated: Date
){}
}

## 2) Configure HttpClientProvider in "app.config.ts" file

export const appConfig: ApplicationConfig = {

providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient()
]
};

## 3) Create Service class to make HTTP Request to backend app

$ ng generate service services/Product

export class ProductService {

private apiUrl = "http://localhost:8080/api/products";

constructor(private httpClient: HttpClient) { }

getProducts(): Observable<Product[]>{

return this.httpClient.get<GetResponse>(this.apiUrl)
.pipe(map(response=> response._embedded.products));

}
}
interface GetResponse{
_embedded: {
products: Product[];
}
}

## 4) Create Product-List Component

$ ng g c product-list

export class ProductListComponent implements OnInit {

products: Product[] = [];

constructor(private productService: ProductService) { }

ngOnInit(): void {
this.productService.getProducts().subscribe(data => {
this.products = data;
})
}
}

### 5) Write presentation logic Product-List Component template file

<p *ngFor="let tempProduct of products">

{{tempProduct.name }} :: {{tempProduct.unitPrice}}
</p>

### 6) Invoke Product-List Component from app-component using component selector

<app-product-list></app-product-list>

### 7) Run the application and see products display

====================================================
Step-3 : Beautify Products Display in Table Format
====================================================

## 1) Add bootstap link in index.html file

<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
crossorigin="anonymous">

## 2) change app.component.html file to display product is container div like below

<div class="container mt-3 mb-3">

<app-product-list></app-product-list>
</div>

## 3) Change product-list.component.html file to display products in table format

<table class="table">
<thead class="table-dark">
<tr>
<th></th>
<th>Name</th>
<th>Price</th>
<th>Units in Stock</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let tempProduct of products">
<td class="align-middle">
<img src="{{tempProduct.imageUrl}}" height="50"/>
</td>
<td>{{tempProduct.name}}</td>
<td>{{tempProduct.unitPrice}}</td>
<td>{{tempProduct.unitsInStock}}</td>
</tr>
</tbody>
</table>

## 4) Add images folder under assets folder

## 5) Re-Start Angular app and check response in browser

===========================================
Step-4 : eCommerce Template Integration
===========================================

## 1) Install bootstap

$ npm install [email protected]

## 2) Install FontAwesome

$ npm install npm install @fortawesome/fontawesome-free

## 3) Verify installation entries in Node_Modules folder

## 4) Add Custom Styles in angular.json file

"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
],

## 5) Add custom styles in styles.css file (copy and paste from our template)

## 6) modify app.component.html file to display menu and header part

<div class="page-wrapper">
<!-- MENU SIDEBAR-->
<aside class="menu-sidebar d-none d-lg-block">
<div class="logo">
<a href="#">
<img src="assets/images/logo.png" alt="ashokit" class="img-
responsive">
</a>
</div>
<div class="menu-sidebar-content js-scrollbar1">
<nav class="navbar-sidebar">
<ul class="list-unstyled navbar-list">
<li>
<a href="#">Laptops</a>
</li>
<li>
<a href="#">Mobiles</a>
</li>
<li>
<a href="#">Shirts</a>
</li>
<li>
<a href="#">Beauty</a>
</li>
</ul>
</nav>
</div>
</aside>
<!-- END MENU SIDEBAR-->
<div class="page-container">
<!-- HEADER DESKTOP-->
<header class="header-desktop">
<div class="section-content section-content-p30">
<div class="container-fluid">
<div class="header-wrap">
<form class="form-header" onsubmit="return false;"
method="GET">
<input class="au-input au-input-xl" type="text"
name="search"
placeholder="Search for data ..." />
<button class="au-btn-submit" type="submit">
Search
</button>
</form>
<div class="cart-area d-n">
<a href="shopping-detail.html">
<div class="total">19.22 <span> 2</span> </div> <i
class="fa fa-shopping-cart"
aria-hidden="true"></i>
 </a>
</div>
</div>
<div class="account-wrap"></div>
</div>
</div>
</header>
<!-- END HEADER DESKTOP-->
<!-- MAIN CONTENT-->
<app-product-list></app-product-list>
</div>

<footer>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Help</a></li>
</ul>
</footer>

## 7) Add Grid Support for product-list.html

<div class="main-content">
<div class="section-content section-content-p30">
<div class="row">
<!-- loop over the collection of products -->
<div *ngFor="let tempProduct of products" class="col-md-3">

<div class="product-box">
<img src="{{ tempProduct.imageUrl }}" class="img-responsive">
<h1>{{ tempProduct.name }}</h1>
<div class="price">{{ tempProduct.unitPrice }}</div>
<a href="#" class="primary-btn">Add to cart</a>
</div>
</div>
</div>
</div>
</div>