File

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

Metadata

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

Index

Inputs

animating
Type : `boolean`
Defined in src/app/cart/cart-components/components/shopping-cart-icon/ui/shopping-cart-icon-ui.component.ts:21

cartItemsCount
Type : `number`
Defined in src/app/cart/cart-components/components/shopping-cart-icon/ui/shopping-cart-icon-ui.component.ts:22

openDropDown$
Type : `Observable<boolean>`
Defined in src/app/cart/cart-components/components/shopping-cart-icon/ui/shopping-cart-icon-ui.component.ts:23

Outputs

onIconClick
Type : `EventEmitter<any>`
Defined in src/app/cart/cart-components/components/shopping-cart-icon/ui/shopping-cart-icon-ui.component.ts:25

Properties

shoppingCartIcon

Decorators :


                                @ViewChild(MatIcon, {read: ElementRef, static: true})

Defined in src/app/cart/cart-components/components/shopping-cart-icon/ui/shopping-cart-icon-ui.component.ts:28

import { 
  Component,
  Input,
  Output,
  EventEmitter,
  ViewChild,
  ElementRef,
  ChangeDetectionStrategy
} from "@angular/core"
import { MatIcon } from '@angular/material/icon'

import { Observable } from 'rxjs'

@Component({
  selector: 'shopping-cart-icon-ui',
  templateUrl: './shopping-cart-icon-ui.component.html',
  styleUrls: ['./shopping-cart-icon-ui.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ShoppingCartIconUiComponent {
  @Input() animating: boolean
  @Input() cartItemsCount: number
  @Input() openDropDown$: Observable<boolean>

  @Output() onIconClick: EventEmitter<any> = new EventEmitter<any>()

  // The dropdown requires an ElementRef to attach too
  @ViewChild(MatIcon, { read: ElementRef, static: true }) shoppingCartIcon
}

<div class="shopping-cart-icon-ui">
  <mat-icon 
    [matBadge]="cartItemsCount" 
    [matBadgeHidden]="cartItemsCount === 0" 
    matBadgeColor="accent"
    [class.animating]="animating"
    aria-hidden="false" aria-label="Shopping Basket"
    (click)="onIconClick.emit()">shopping_basket</mat-icon>
  <drop-down 
    [attachToElement]="shoppingCartIcon"
    [isOpen$]="openDropDown$">
    <shopping-cart ui="dropdown"></shopping-cart>
  </drop-down>
</div>

./shopping-cart-icon-ui.component.scss

@import '../../../../../../styles/animations/bounce-left';

:host {
  display: flex;
}

.shopping-cart-icon-ui {
  height: 24px; // same height of mat-icon, other-wise the height is too large, which corrupts the centered-vertical positioning
  .animating {
    -webkit-animation: bounce-left 0.9s both;
            animation: bounce-left 0.9s both;
  }
  mat-icon {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
    &:hover {
      cursor: pointer;
    }
  }
}

Legend

Html element

Component

Html element with directive

File

Metadata

Index

Properties

Inputs

Outputs

Inputs

Outputs

Properties

result-matching ""

No results matching ""