Can a .model.ts file have a class with a property as an image. and later use it using string interpolation? or is there a better way to deal with this? string interpolation ( BEGINNER ANGULAR TRYING OUT THINGS!!)
Eg:-
Products. model.ts
export class Products {
name : string;
description: string;
price : number;
**image : ??**
constructor(name:string,description:string,price:number,**image:??**){
this.name = name;
this.description = description;
this.price = price;
}
}
Product. component.ts
productsList: Products[]=[
new Products('IphoneX','this is an IphonX product',800),
new Products('IphoneXL','this is an IphonXl product',900),
new Products('IphoneXmini','this is an IphonXmini product',1200),
new Products('IphoneXpromax','this is an IphonXpromax product',1340),
]
product.component.html
<div class="card__container" *ngFor="let product of productsList">
<mat-card>
<div class="product" >
<div class="product__img" >
{{ product.img }}
</div>
<div class="product__details">
<h1>{{ product.name}}</h1>
<p>{{ product.description }}</p>
<h3>{{ product.price | currency }}</h3>
<button (click)="addtoCart(product)"><mat-icon>add_shopping_cart</mat-icon>Cart</button>
</div>
</div>
</mat-card>
</div>
The easiest solution would be to do:
image: 'some_image_name.png'
(or for class: image: string)
then have that image in assets folder (for example in assets/images), so that you can reference it from the template as:
<div class="product__img" >
<img [src]="'/assets/images/' + product.img" />
</div>