Working with Angular-13 using models . can model.ts file have images as a property?-CodePudding

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  *ngFor="let product of productsList">
    <mat-card>
        <div  >
            <div  >
                {{ product.img }}
            </div>
            <div >
                <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>

CodePudding user response：

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  >
    <img [src]="'/assets/images/'   product.img" />
</div>