home page done but add to cart functionality is remaing

4 years ago · 9c63fdd9ba
5 changed files with 83 additions and 4 deletions
--- a/Angular-UrbanBazaar/src/app/app.component.html
+++ b/Angular-UrbanBazaar/src/app/app.component.html
@ -1,3 +1,4 @@
 <app-page-nav-bar></app-page-nav-bar>
+<app-home></app-home>

 <router-outlet></router-outlet> 
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.css
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.css
@ -0,0 +1,35 @@
+.showButton{
+    margin-left: 1250px;
+    border-radius: 15px;
+    padding: 10px;
+    margin-top: 10px;
+    border-color: antiquewhite;
+}
+
+.Addbutton{
+    border-radius: 15px;
+    border-color: antiquewhite;
+    color: darkgray;
+    background-color: rgb(248, 229, 247);
+
+}
+.card{
+    max-width: 300px;
+    border-width: 1px;
+    border-color:antiquewhite;
+    text-align: center;
+    margin-top: 12px;
+    font-family: Arial, Helvetica, sans-serif;
+    border-radius: 12px;
+    
+}
+
+.price {
+    color: grey;
+    font-size: 22px;
+  }
+.cardParent{
+    display: flex;
+   justify-content: space-between;
+   flex-grow:1;
+}
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.html
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.html
@ -1 +1,31 @@
-<p>home works!</p>
+<!-- <p>home works!</p> -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<body>
+    <div>
+        <button class="showButton" (click)="showButton()">ShowCart</button>
+    </div>
+
+    <div class="cardParent">
+    <div class="card" *ngFor="let i of products|async">
+        <img src="{{i.productimage}}" style="width:100%">
+        <h6>{{i.productname}}</h6>
+        <p class="price">Rs.{{i.productprice}}</p>
+        <p class="price">Weight {{i.productweight}}</p>
+        <p><button class="Addbutton" (click)="addCart()">Add to Cart</button></p>
+      </div>
+    </div>
+
+
+
+</body>
+
+</html>
--- a/Angular-UrbanBazaar/src/app/components/home/home.component.ts
+++ b/Angular-UrbanBazaar/src/app/components/home/home.component.ts
@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { ProductService } from './../../services/product.service';
+import { Observable } from 'rxjs';
+import { Product } from './../../models/product';

@Component({
  selector: 'app-home',
@ -6,8 +9,18 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
+  showButton(){
+    alert("show cart clicked")
+  }
+
+  addCart(){
+    alert("added to cart")
+  }

-  constructor() { }
+  products:Observable<Product[]>
+  constructor(private productservice: ProductService) {
+    this.products = this.productservice.showAllProduct();
+   }

  ngOnInit(): void {
  }
--- a/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
+++ b/Angular-UrbanBazaar/src/app/components/page-nav-bar/page-nav-bar.component.html
@ -1,7 +1,7 @@
-<p>page-nav-bar works!</p>
+<!-- <p>page-nav-bar works!</p> -->

 <nav class="navbar navbar-icon-top navbar-expand-lg navbar-dark bg-dark">
-    <a class="navbar-brand" href="#">Navbar</a>
+    <a class="navbar-brand" href="#">Urban Bazaar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>