src/app/book-detail/price/price.component.ts
Component that displays the price for a given book
If a discount is offered, the original price is crossed out and the discounted price is shown next to it.
| selector | book-price |
| templateUrl | ./price.component.html |
price
|
Pricing information for the book This input property is passed down from the parent BookDetailComponent to this component.
Type: |
import { Component, Input } from '@angular/core';
import { Price } from "app/models/price.model";
/**
* Component that displays the price for a given book
*
* If a discount is offered, the original price is crossed out and
* the discounted price is shown next to it.
*/
@Component({
selector: 'book-price',
templateUrl: './price.component.html'
})
export class PriceComponent {
/**
* Pricing information for the book
*
* This input property is passed down from the parent {@link BookDetailComponent}
* to this component.
*/
@Input() price: Price;
}
<p>
<span [ngStyle]="{'text-decoration': price.discountPercentage != 0 ? 'line-through' : 'none'}">
{{ price.price | currency:'USD':true:'.2-2' }}
</span>
<span *ngIf="price.discountPercentage != 0">
<!-- the discount pipe is used to calculate the book's discounted price -->
<span class="text-success">
{{ price.price | discount:price.discountPercentage | currency:'USD':true:'.2-2' }}
</span>
<span class="label label-success">{{ price.discountPercentage }} % off</span>
</span>
</p>