product.component.ts

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

@Component({
  selector: 'app-product',
  template: `<div>
  <img [src]="pData.productImage" />
  <h3>{{ pData.productName }}</h3>
  <h4>{{ pData.productPrice }}</h4>
  <button *ngIf="pData.productStock;else nostock">
    Add to Cart
  </button>
  <ng-template #nostock>
    <p>out of stock</p>
  </ng-template>
</div>
`,
  styleUrls: ['./product.component.css']
})
export class ProductComponent {
  pData: Product = null;
  
  constructor() {
    this.pData={
      productId: 1000,
      productImage: 'some_image.jpg',
      productName: 'Product 1',
      productPrice: 10000,
      productStock: true
    }
  }
}