File
Implements
Metadata
| selector |
cx-global-message |
| templateUrl |
./global-message.component.html |
|
iconTypes
|
Default value : ICON_TYPE
|
|
|
|
messages$
|
Type : Observable<GlobalMessageEntities>
|
|
|
|
messageType
|
Default value : GlobalMessageType
|
|
|
import { Component, OnInit } from '@angular/core';
import {
GlobalMessageEntities,
GlobalMessageService,
GlobalMessageType,
} from '@spartacus/core';
import { Observable } from 'rxjs';
import { ICON_TYPE } from '../../../cms-components/misc/icon/icon.model';
@Component({
selector: 'cx-global-message',
templateUrl: './global-message.component.html',
})
export class GlobalMessageComponent implements OnInit {
iconTypes = ICON_TYPE;
messages$: Observable<GlobalMessageEntities>;
messageType: typeof GlobalMessageType = GlobalMessageType;
constructor(protected globalMessageService: GlobalMessageService) {}
ngOnInit(): void {
this.messages$ = this.globalMessageService.get();
}
clear(type: GlobalMessageType, index: number): void {
this.globalMessageService.remove(type, index);
}
}
<div *ngIf="messages$ | async as messages">
<div
class="alert alert-success"
*ngFor="
let confMsg of messages[messageType.MSG_TYPE_CONFIRMATION];
let i = index
"
>
<span class="alert-icon">
<cx-icon [type]="iconTypes.SUCCESS"></cx-icon>
</span>
<span>{{ confMsg | cxTranslate }}</span>
<button
class="close"
type="button"
(click)="clear(messageType.MSG_TYPE_CONFIRMATION, i)"
>
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
<div
class="alert alert-info"
*ngFor="let infoMsg of messages[messageType.MSG_TYPE_INFO]; let i = index"
>
<span class="alert-icon">
<cx-icon [type]="iconTypes.INFO"></cx-icon>
</span>
<span>{{ infoMsg | cxTranslate }}</span>
<button
class="close"
type="button"
(click)="clear(messageType.MSG_TYPE_INFO, i)"
>
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
<div
class="alert alert-warning"
*ngFor="
let infoMsg of messages[messageType.MSG_TYPE_WARNING];
let i = index
"
>
<span class="alert-icon">
<cx-icon [type]="iconTypes.WARNING"></cx-icon>
</span>
<span>{{ infoMsg | cxTranslate }}</span>
<button
class="close"
type="button"
(click)="clear(messageType.MSG_TYPE_WARNING, i)"
>
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
<div
class="alert alert-danger"
*ngFor="let errorMsg of messages[messageType.MSG_TYPE_ERROR]; let i = index"
>
<span class="alert-icon">
<cx-icon [type]="iconTypes.ERROR"></cx-icon>
</span>
<span>{{ errorMsg | cxTranslate }}</span>
<button
class="close"
type="button"
(click)="clear(messageType.MSG_TYPE_ERROR, i)"
>
<cx-icon [type]="iconTypes.CLOSE"></cx-icon>
</button>
</div>
</div>
Legend
Html element with directive