app.component.html

<div class="row">

  <div class="container">

    <h2>Add Product</h2>

    <div class="form-group">

      <input type="text" placeholder="Enter name of the Product" class="form-control" #field >

    </div>

    <div class="form-group">

      <input type="number" placeholder="Enter price" class="form-control" #price >

    </div>

    <div class="form-group">

    <input  class="form-control"  (change)="upload(f,img)"  type="file" #f/> 

    </div>

    <div class="form-group">

      <img height="100" width="100" alt="Preview Will be displayed here"  src=""  #img>

    </div>

    <button (click)="add(field,img,price)" class="btn btn-primary">Add Product</button>

  </div>

</div>

<div class="row">

  <hr>

  <div class="container">

    <h2>Products</h2>

    <div class="row">

      <div class="col-md-4 zweet-card" *ngFor="let item of arr | async">

        <div class="panel panel-default">

          <div class="panel-body">

            <strong>{{item.pname}}</strong> <br /> {{item.price | currency:'INR':true }}<br />

            <small>{{item.createdAt| date: 'd/M/y H.m a'}}</small>

            <img height="100" width="100" src="{{item.image}}">

            <div class="btn btn-danger btn-sm btn-remove" (click)="remove(item.$key)">

              <i class="glyphicon glyphicon-remove"></i>

            </div>

            <div class="btn btn-info btn-sm pull-right btn-like" (click)="like(item.$key,item.likes)">

              <div class="badge badge-like-count">{{item.likes}}</div>

              <i class="glyphicon glyphicon-thumbs-up"></i>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>