File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
shopping-cart-ui |
| styleUrls |
./shopping-cart-ui.component.scss |
| templateUrl |
./shopping-cart-ui.component.html |
Outputs
|
onClickRemove
|
Type : EventEmitter<number>
|
|
|
import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from "@angular/core"
import { Book } from '../../../../../book/book-data/models/book.model'
@Component({
selector: 'shopping-cart-ui',
templateUrl: './shopping-cart-ui.component.html',
styleUrls: ['./shopping-cart-ui.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShoppingCartUiComponent {
@Input() books: Book[]
@Input() ui: string
@Output() onClickRemove: EventEmitter<number> = new EventEmitter<number>()
}
<article class="shopping-cart-ui" *ngIf="ui === 'dropdown'; else checkout">
<p *ngIf="books.length === 0" fxLayoutAlign="center">
Empty
</p>
<ul fxLayout="column" fxLayoutAlign="start stretch">
<li *ngFor="let book of books; let i = index" fxLayout="row" fxLayoutAlign="start stretch">
<div class="row-number" fxFlex="auto">
{{i+1}}.
</div>
<div fxFlex="1 1 100%">{{book.title}}</div>
<div fxFlex="auto"><mat-icon class="close" (click)="onClickRemove.emit(book.id)">close</mat-icon></div>
</li>
</ul>
</article>
<ng-template #checkout>
<article class="shopping-cart-ui">
<p *ngIf="books.length === 0">
Your basket is empty!
</p>
<ul fxLayout="column" fxLayoutAlign="start stretch">
<li *ngFor="let book of books; let i = index"
fxLayout="row"
fxLayoutAlign="start stretch">
<div class="row-number" fxFlex="auto">
<img [src]="book.cover?.small" />
</div>
<div fxFlex="1 1 100%" fxLayout="column" fxLayoutAlign="center">
<div class="title"><b>{{book.title}}</b></div>
<div class="author">by:
<span *ngIf="book.authors">
{{book.authors[0].name}}
</span>
</div>
</div>
</li>
</ul>
</article>
</ng-template>
// :host {
// display: block;
// }
Legend
Html element with directive