From d8d30747d03e44641482222ee8069466639f0dce Mon Sep 17 00:00:00 2001 From: Raghu-Ch Date: Thu, 13 Sep 2018 14:13:24 -0400 Subject: [PATCH] add product detail & modify products c --- .vscode/launch.json | 15 +++++++++++++++ src/app/app.module.ts | 2 ++ src/app/product/product-detail.component.css | 4 ++++ src/app/product/product-detail.component.html | 6 +++--- src/app/product/product-detail.component.ts | 16 +++++++++++++++- src/app/product/product.component.html | 3 ++- src/app/product/product.component.ts | 6 +----- src/app/product/product.module.ts | 8 ++++++-- src/app/product/product.service.ts | 2 +- 9 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 .vscode/launch.json diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..1348ba4 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:4200", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 19928aa..23d871d 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,10 +18,12 @@ import { MatTooltipModule } from '@angular/material/tooltip'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { HomeComponent } from './home/home.component'; import { ProductComponent } from './product/product.component'; +import { ProductDetailComponent } from './product/product-detail.component'; const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'product', component: ProductComponent }, + { path: 'product/:id', component: ProductDetailComponent }, { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; diff --git a/src/app/product/product-detail.component.css b/src/app/product/product-detail.component.css index e69de29..d0f30f7 100644 --- a/src/app/product/product-detail.component.css +++ b/src/app/product/product-detail.component.css @@ -0,0 +1,4 @@ +section { + width: 60%; + margin: 10px auto 0 auto; +} diff --git a/src/app/product/product-detail.component.html b/src/app/product/product-detail.component.html index 1bbc2d4..ddff924 100644 --- a/src/app/product/product-detail.component.html +++ b/src/app/product/product-detail.component.html @@ -1,3 +1,3 @@ -

- product-detail works! -

+
+

{{currentProduct.productName}}

+
diff --git a/src/app/product/product-detail.component.ts b/src/app/product/product-detail.component.ts index a5944a8..6ad398b 100644 --- a/src/app/product/product-detail.component.ts +++ b/src/app/product/product-detail.component.ts @@ -1,4 +1,7 @@ import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; + +import { ProductService } from '../product/product.service'; @Component({ selector: 'app-product-detail', @@ -7,9 +10,20 @@ import { Component, OnInit } from '@angular/core'; }) export class ProductDetailComponent implements OnInit { - constructor() { } + currentProduct = {}; + + constructor(private productService: ProductService, private route: ActivatedRoute) { } ngOnInit() { + this.getProductDetails(); } + getProductDetails(): void { + const id = this.route.snapshot.paramMap.get('id'); + // console.log(id); + this.productService.getProduct(id).subscribe((res) => { + this.currentProduct = res; + console.log(this.currentProduct); + }); + } } diff --git a/src/app/product/product.component.html b/src/app/product/product.component.html index 33f18c6..4c8a47c 100644 --- a/src/app/product/product.component.html +++ b/src/app/product/product.component.html @@ -1,4 +1,5 @@
- + {{product.productName}}
+ diff --git a/src/app/product/product.component.ts b/src/app/product/product.component.ts index 07d55dc..6f56973 100644 --- a/src/app/product/product.component.ts +++ b/src/app/product/product.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; -import { RouterModule, Router } from '@angular/router'; +import { Router } from '@angular/router'; import { ProductService } from '../product/product.service'; import { Product } from './product'; @@ -24,8 +24,4 @@ export class ProductComponent implements OnInit { }); } - getProductById(id: string): void { - this.productService.getProduct(id).subscribe(res => console.log(res)); - } - } diff --git a/src/app/product/product.module.ts b/src/app/product/product.module.ts index ac81e81..ac28fe3 100644 --- a/src/app/product/product.module.ts +++ b/src/app/product/product.module.ts @@ -5,8 +5,10 @@ import { RouterModule } from '@angular/router'; import { MatTableModule } from '@angular/material/table'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatGridListModule } from '@angular/material/grid-list'; -import {ProductComponent} from '../product/product.component'; +import { ProductComponent } from '../product/product.component'; import { ProductDetailComponent } from './product-detail.component'; @NgModule({ @@ -15,7 +17,9 @@ import { ProductDetailComponent } from './product-detail.component'; RouterModule, MatTableModule, MatCardModule, - MatButtonModule + MatButtonModule, + MatDividerModule, + MatGridListModule ], declarations: [ ProductComponent, diff --git a/src/app/product/product.service.ts b/src/app/product/product.service.ts index 33a2747..8babff8 100644 --- a/src/app/product/product.service.ts +++ b/src/app/product/product.service.ts @@ -20,7 +20,7 @@ export class ProductService { getProduct(id: string): Observable { const url = `${this.__url}/products/${id}`; - console.log(url); + // console.log(url); return this.http.get(url); } }