### File

`src/app/home/content/product-list/product-list-item/product-list-item.component.ts`

### Implements

`OnInit`

### Metadata

selector | `app-product-list-item`
styleUrls | `product-list-item.component.scss`
templateUrl | `./product-list-item.component.html`

### Inputs

`product` | Type: `Product`
Defined in src/app/home/content/product-list/product-list-item/product-list-item.component.ts:11

### Constructor

`constructor()`
Defined in src/app/home/content/product-list/product-list-item/product-list-item.component.ts:11

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/home/content/product-list/product-list-item/product-list-item.component.ts:15
Returns: `void`

getProductImageUrl
`getProductImageUrl(url: any)`
Defined in src/app/home/content/product-list/product-list-item/product-list-item.component.ts:18
Returns: `void`

    import { environment } from './../../../../../environments/environment';
    import { Product } from './../../../../core/models/product';
    import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'app-product-list-item',
      templateUrl: './product-list-item.component.html',
      styleUrls: ['./product-list-item.component.scss']
    })
    export class ProductListItemComponent implements OnInit {
      @Input() product: Product;

      constructor() { }

      ngOnInit() {
      }

      getProductImageUrl(url) {
        return environment.API_ENDPOINT + url;
      }
    }

    <div class="product-tile">
      <p> Product id: {{ product.id }} </p>
      <p> Product Name : {{ product.name }} </p>
      <p> Product Price : {{ product.price }} </p>
      <img [src]="getProductImageUrl(product.master.images[0]?.product_url)">
    </div>

Legend
Html element
Component
Html element with directive

# results matching ""

# No results matching ""