File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-cart-item-validation-warning |
| templateUrl |
./cart-item-validation-warning.component.html |
|
cartModification$
|
Default value : this.cartValidationStateService.cartValidationResult$.pipe(
map((modificationList) =>
modificationList.find(
(modification) => modification.entry.product.code === this.code
)
)
)
|
|
|
|
code
|
Type : string
|
Decorators :
@Input()
|
|
|
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
isVisible
|
Default value : true
|
|
|
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { map } from 'rxjs/operators';
import { CartValidationStateService } from '../cart-validation-state.service';
import { ICON_TYPE } from '../../../misc/icon/index';
@Component({
selector: 'cx-cart-item-validation-warning',
templateUrl: './cart-item-validation-warning.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CartItemValidationWarningComponent {
@Input()
code: string;
iconTypes = ICON_TYPE;
isVisible = true;
cartModification$ =
this.cartValidationStateService.cartValidationResult$.pipe(
map((modificationList) =>
modificationList.find(
(modification) => modification.entry.product.code === this.code
)
)
);
constructor(
protected cartValidationStateService: CartValidationStateService
) {}
}
<ng-container *ngIf="cartModification$ | async as cartModification">
<div class="alert alert-info" *ngIf="isVisible">
<span class="alert-icon">
<cx-icon [type]="iconTypes.INFO"></cx-icon>
</span>
<span>
{{
'validation.' + cartModification.statusCode
| cxTranslate
: {
quantity: cartModification.quantityAdded
}
}}
</span>
<button class="close" type="button" (click)="isVisible = !isVisible">
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
</ng-container>
Legend
Html element with directive