File
Implements
Metadata
selector |
app-line-item |
styleUrls |
line-item.component.scss |
templateUrl |
./line-item.component.html |
Methods
ngOnInit
|
ngOnInit()
|
|
Returns: void
|
removeLineItem
|
removeLineItem()
|
|
Returns: void
|
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 with directive