File

src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts

Implements

OnInit

Metadata

selector app-line-item
styleUrls line-item.component.scss
templateUrl ./line-item.component.html

Inputs

lineItem

Type: LineItem

Constructor

constructor(store: Store, actions: CheckoutActions, checkoutService: CheckoutService)

Methods

ngOnInit
ngOnInit()
Returns: void
removeLineItem
removeLineItem()
Returns: void

Properties

amount
amount: number
image
image: string
name
name: string
quantity
quantity: number
import { CheckoutService } from './../../../../../core/services/checkout.service';
import { CheckoutActions } from './../../../../actions/checkout.actions';
import { AppState } from './../../../../../interfaces';
import { Store } from '@ngrx/store';
import { environment } from './../../../../../../environments/environment';
import { LineItem } from './../../../../../core/models/line_item';
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-line-item',
  templateUrl: './line-item.component.html',
  styleUrls: ['./line-item.component.scss']
})
export class LineItemComponent implements OnInit {

  image: string;
  name: string;
  quantity: number;
  amount: number;

  @Input() lineItem: LineItem;

  constructor(private store: Store<AppState>, private actions: CheckoutActions, private checkoutService: CheckoutService) { }

  ngOnInit() {
    this.image = environment.API_ENDPOINT + this.lineItem.variant.images[0].product_url;
    this.name = this.lineItem.variant.name;
    this.quantity = this.lineItem.quantity;
    this.amount = this.lineItem.display_amount;
  }

  // Change this method once angular releases RC4
  // Follow this linke to know more about this issue https://github.com/angular/angular/issues/12869
  removeLineItem() {
    // this.store.dispatch(this.actions.removeLineItem(this.lineItem.id));
    this.checkoutService.deleteLineItem(this.lineItem)
      .subscribe();
  }

}
<div class="prod-item">
  <div class="col1">
    <!--<img [src]="'http://assets.myntassets.com/h_128,q_100,w_96/v1/assets/images/1714052/2017/3/6/11488792709467-HRX-by-Hrithik-Roshan-Men-Black-Printed-Round-Neck-T-Shirt-191488792709172-1.jpg'">-->
    <img [src]="image" alt="">
  </div>
  <div class="col2">
    <div class="prod-name">
      <a class="c-gray">
        {{name}}
      </a>
    </div>
    <div class="prod-amount">
      {{amount}}
    </div>
    <div class="size-qty-wrap">
      <div class="size-qty">
        <span class="size"> 
          <span class="gray">Size:</span>
          <span class="value">L</span>
          <!--<span class="icon"></span>-->
        </span>
        <span class="qty">
          <span class="gray">Qty:</span>
          <span class="value">1</span>
          <!--<span class="icon"></span>-->
        </span>
      </div>
      <div class="seller">Sold by: Proleague</div>
    </div>
    <div class="edit-move-delete">
      <div class="actions">
        <span (click)="removeLineItem()" class="delete-item">REMOVE</span>
        <span class="move-item coming-soon">MOVE TO WISHLIST</span>
      </div>
    </div>
  </div>
</div>

Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""