### 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`
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:21

### Constructor

`constructor(store: Store, actions: CheckoutActions, checkoutService: CheckoutService)`
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:21

### Methods

ngOnInit
`ngOnInit()`
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:25
Returns: `void`

removeLineItem
`removeLineItem()`
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:34
Returns: `void`

### Properties

amount
`amount: `number``
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:19

image
`image: `string``
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:16

name
`name: `string``
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:17

quantity
`quantity: `number``
Defined in src/app/checkout/cart/components/line-item-list/line-item/line-item.component.ts:18

    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 ""