File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
shopping-cart-icon-ui |
| styleUrls |
./shopping-cart-icon-ui.component.scss |
| templateUrl |
./shopping-cart-icon-ui.component.html |
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
openDropDown$
|
Type : Observable<boolean>
|
|
|
Outputs
|
onIconClick
|
Type : EventEmitter<any>
|
|
|
|
shoppingCartIcon
|
Decorators :
@ViewChild(MatIcon, {read: ElementRef, static: true})
|
|
|
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>
@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 with directive