ngLibrary-Documentation
  1. Components
  2. ShoppingCartUiComponent

File

src/app/cart/cart-components/components/shopping-cart/ui/shopping-cart-ui.component.ts

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector shopping-cart-ui
styleUrls ./shopping-cart-ui.component.scss
templateUrl ./shopping-cart-ui.component.html

Index

Inputs
Outputs

Inputs

books
Type : Book[]
Defined in src/app/cart/cart-components/components/shopping-cart/ui/shopping-cart-ui.component.ts:12
ui
Type : string
Defined in src/app/cart/cart-components/components/shopping-cart/ui/shopping-cart-ui.component.ts:13

Outputs

onClickRemove
Type : EventEmitter<number>
Defined in src/app/cart/cart-components/components/shopping-cart/ui/shopping-cart-ui.component.ts:14
 
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>()
}
Copy
<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>
Copy

./shopping-cart-ui.component.scss 

// :host {
//   display: block;
// }
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""