Skip to content

Commit 7af014a

Browse files
author
Adarsh Maurya
committed
- data binding & pipes
1 parent 7f3418c commit 7af014a

File tree

3 files changed

+80
-63
lines changed

3 files changed

+80
-63
lines changed

‎APM-Start/src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { BrowserModule } from '@angular/platform-browser';
22
import { NgModule } from '@angular/core';
3+
import {FormsModule} from '@angular/forms';
34

45
import { AppComponent } from './app.component';
56
import { ProductListComponent } from './products/product-list.component';
@@ -10,7 +11,8 @@ import { ProductListComponent } from './products/product-list.component';
1011
ProductListComponent
1112
],
1213
imports: [
13-
BrowserModule
14+
BrowserModule,
15+
FormsModule
1416
],
1517
bootstrap: [AppComponent]
1618
})

‎APM-Start/src/app/products/product-list.component.html‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@
66
<div class='row'>
77
<div class='col-md-2'>Filter by:</div>
88
<div class='col-md-4'>
9-
<input type='text' />
9+
<input type='text'
10+
[(ngModel)]='listFilter' />
1011
</div>
1112
</div>
1213
<div class='row'>
1314
<div class='col-md-6'>
14-
<h4>Filtered by: </h4>
15+
<h4>Filtered by: {{listFilter}}</h4>
1516
</div>
1617
</div>
1718
<div class='table-responsive'>
@@ -20,8 +21,9 @@ <h4>Filtered by: </h4>
2021
<thead>
2122
<tr>
2223
<th>
23-
<button class='btn btn-primary'>
24-
Show Image
24+
<button class='btn btn-primary'
25+
(click)='toggleImage()'>
26+
{{showImage ? 'Hide' : 'Show' }} Image
2527
</button>
2628
</th>
2729
<th>Product</th>
@@ -33,11 +35,17 @@ <h4>Filtered by: </h4>
3335
</thead>
3436
<tbody>
3537
<tr *ngFor='let product of products'>
36-
<td></td>
38+
<td>
39+
<img *ngIf='showImage'
40+
[src]='product.imageUrl'
41+
[title]='product.productName'
42+
[style.width.px]='imageWidth'
43+
[style.margin.px]='imageMargin'>
44+
</td>
3745
<td>{{ product.productName }}</td>
38-
<td>{{ product.productCode}}</td>
46+
<td>{{ product.productCode | lowercase }}</td>
3947
<td>{{ product.releaseDate}}</td>
40-
<td>{{ product.price}}</td>
48+
<td>{{ product.price | currency: 'INR':'symbol':'1.2-2' }}</td>
4149
<td>{{ product.starRating}}</td>
4250
</tr>
4351
</tbody>

‎APM-Start/src/app/products/product-list.component.ts‎

Lines changed: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,68 @@
11
import { Component } from "@angular/core";
22

33
@Component({
4-
selector: 'pm-products',
5-
templateUrl: './product-list.component.html'
4+
selector: 'pm-products',
5+
templateUrl: './product-list.component.html'
66
})
77
export class ProductListComponent {
8-
pageTitle: string = 'Product List';
9-
products: any[] = [
10-
{
11-
"productId": 1,
12-
"productName": "Leaf Rake",
13-
"productCode": "GDN-0011",
14-
"releaseDate": "March 19, 2016",
15-
"description": "Leaf rake with 48-inch wooden handle.",
16-
"price": 19.95,
17-
"starRating": 3.2,
18-
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
19-
},
20-
{
21-
"productId": 2,
22-
"productName": "Garden Cart",
23-
"productCode": "GDN-0023",
24-
"releaseDate": "March 18, 2016",
25-
"description": "15 gallon capacity rolling garden cart",
26-
"price": 32.99,
27-
"starRating": 4.2,
28-
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
29-
},
30-
{
31-
"productId": 5,
32-
"productName": "Hammer",
33-
"productCode": "TBX-0048",
34-
"releaseDate": "May 21, 2016",
35-
"description": "Curved claw steel hammer",
36-
"price": 8.9,
37-
"starRating": 4.8,
38-
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
39-
},
40-
{
41-
"productId": 8,
42-
"productName": "Saw",
43-
"productCode": "TBX-0022",
44-
"releaseDate": "May 15, 2016",
45-
"description": "15-inch steel blade hand saw",
46-
"price": 11.55,
47-
"starRating": 3.7,
48-
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
49-
},
50-
{
51-
"productId": 10,
52-
"productName": "Video Game Controller",
53-
"productCode": "GMG-0042",
54-
"releaseDate": "October 15, 2015",
55-
"description": "Standard two-button video game controller",
56-
"price": 35.95,
57-
"starRating": 4.6,
58-
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
59-
}
60-
];
8+
pageTitle: string = 'Product List';
9+
imageWidth: number = 50;
10+
imageMargin: number = 2;
11+
showImage: boolean = false;
12+
listFilter: string = 'cart';
13+
products: any[] = [
14+
{
15+
"productId": 1,
16+
"productName": "Leaf Rake",
17+
"productCode": "GDN-0011",
18+
"releaseDate": "March 19, 2016",
19+
"description": "Leaf rake with 48-inch wooden handle.",
20+
"price": 19.95,
21+
"starRating": 3.2,
22+
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/26215/Anonymous_Leaf_Rake.png"
23+
},
24+
{
25+
"productId": 2,
26+
"productName": "Garden Cart",
27+
"productCode": "GDN-0023",
28+
"releaseDate": "March 18, 2016",
29+
"description": "15 gallon capacity rolling garden cart",
30+
"price": 32.99,
31+
"starRating": 4.2,
32+
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/58471/garden_cart.png"
33+
},
34+
{
35+
"productId": 5,
36+
"productName": "Hammer",
37+
"productCode": "TBX-0048",
38+
"releaseDate": "May 21, 2016",
39+
"description": "Curved claw steel hammer",
40+
"price": 8.9,
41+
"starRating": 4.8,
42+
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/73/rejon_Hammer.png"
43+
},
44+
{
45+
"productId": 8,
46+
"productName": "Saw",
47+
"productCode": "TBX-0022",
48+
"releaseDate": "May 15, 2016",
49+
"description": "15-inch steel blade hand saw",
50+
"price": 11.55,
51+
"starRating": 3.7,
52+
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/27070/egore911_saw.png"
53+
},
54+
{
55+
"productId": 10,
56+
"productName": "Video Game Controller",
57+
"productCode": "GMG-0042",
58+
"releaseDate": "October 15, 2015",
59+
"description": "Standard two-button video game controller",
60+
"price": 35.95,
61+
"starRating": 4.6,
62+
"imageUrl": "https://openclipart.org/image/300px/svg_to_png/120337/xbox-controller_01.png"
63+
}
64+
];
65+
toggleImage(): void {
66+
this.showImage = !this.showImage;
67+
}
6168
}

0 commit comments

Comments
 (0)