I am learning angular by following steps in a book and there’s a task that demanded creating a product component like in Amazon.For each product, we have an image, the product name, the product release date, the rating component and the number of ratings it has. I followed all steps but the image didn’t appear in after compiling my code.Can anyone find where the problem is and thank you.
app.component.ts
JavaScript
x
8
1
@Component({2
selector: 'app-root',3
template: `<products></products>`,4
})5
export class AppComponent {6
title = 'product-app';7
}8
products.component.ts
JavaScript
1
20
20
1
import { ProductService } from "../Services/product.service";2
3
@Component({4
selector:'products',5
template:`6
<h2>Products</h2>7
<div *ngFor="let product of products">8
<product [data]="product"></product>9
</div>10
`,11
providers:[ProductService]12
})13
14
export class ProductsComponent{15
products;16
constructor(productService: ProductService){17
this.products = productService.getProducts();18
}19
}20
product.component.ts
JavaScript
1
17
17
1
2
@Component({3
selector: 'product',4
templateUrl: 'product.component.html',5
styles: [`6
.media {7
margin-bottom: 20px;8
}9
`]10
})11
12
export class ProductComponent{13
14
@Input() data:any;15
}16
17
product.component.html
JavaScript
1
15
15
1
<a class="pull-left" href="#">2
<img class="media-object" data-src="data.imageUrl" />3
</a>4
<div class="media-body">5
<h4 class="media-heading">{{ data.productName }}</h4>6
{{ data.releasedDate }}7
<rating [rating-value]="data.rating" [numOfReviews]="data.numOfReviews">8
</rating>9
<br />10
{{ data.description }}11
</div>12
</div>13
14
15
product.service.ts
JavaScript
1
29
29
1
getProducts() {2
return [3
{4
imageUrl: "http://loremflickr.com/150/150?random=1",5
productName: "Product 1",6
releasedDate: "May 31, 2016",7
description: "Cras sit amet nibh libero, in gravida... ",8
rating: 4,9
numOfReviews: 210
},11
{12
imageUrl: "http://loremflickr.com/150/150?random=2",13
productName: "Product 2",14
releasedDate: "October 31, 2016",15
description: "Cras sit amet nibh libero, in gravida... ",16
rating: 2,17
numOfReviews: 1218
},19
{20
imageUrl: "http://loremflickr.com/150/150?random=3",21
productName: "Product 3",22
releasedDate: "July 30, 2016",23
description: "Cras sit amet nibh libero, in gravida... ",24
rating: 5,25
numOfReviews: 226
}];27
}28
}29
rating.component.ts
JavaScript
1
14
14
1
@Component({2
selector:'rating',3
templateUrl:'rating.component.html'4
})5
6
export class RatingComponent{7
@Input('rating-value') rating = 0;8
@Input() numOfReviews = 0;9
10
onClick(ratingValue:any){11
this.rating = ratingValue;12
}13
}14
rating.component.html
JavaScript
1
9
1
<i2
class="glyphicon"3
[class.glyphicon-star-empty]="rating < number"4
[class.glyphicon-star]="rating >= number"5
(click)="onClick(number)"6
>7
</i>8
</span>9
index.html
JavaScript
1
17
17
1
<html lang="en">2
<head>3
<meta charset="utf-8" />4
<title>ProductApp</title>5
<base href="/" />6
<meta name="viewport" content="width=device-width, initial-scale=1" />7
<link rel="icon" type="image/x-icon" href="favicon.ico" />8
<link9
rel="stylesheet"10
href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css"11
/>12
</head>13
<body>14
<app-root></app-root>15
</body>16
</html>17
Advertisement
Answer
You have to bind the src attribute of img tag, like below:
JavaScript
1
2
1
<img class="media-object" [src]="data.imageUrl" />2