---
# System prepended metadata

title: Message
tags: [update primeNG 18]

---

## Message [🔗](https://pialm01/tfs/DefaultCollection/MIDLXACO01-AO/_git/cub-design-guideline-primeng/commit/62bf66e6539f393856aae3a0844fc6af7286e67e?refName=refs%2Fheads%2Ffeature%2Ftest-v18)

### Import
==v14==
需導入 MessagesModule，使用 <p-messages> 實現功能。
詳細使用方式請參考 PrimeNG Messages。 https://v17.primeng.org/messages
```typescript
import { MessagesModule } from 'primeng/messages';
```
==v18==
需導入 MessageModule，使用 <p-message> 實現功能。
詳細使用方式請參考 PrimeNG Message。 https://primeng.org/message
```typescript
import { MessageModule } from 'primeng/message';
```

### Getting start
==v14==
```html
<p-messages [(value)]="msgs"></p-messages>
```
```typescript
import { Message } from 'primeng/api';

msgs: Message[] = [
  { severity: 'success', summary: 'Success', detail: 'Message Content' },
  { severity: 'info', summary: 'Info', detail: 'Message Content'  },
  { severity: 'warn', summary: 'Warn', detail: 'Message Content' },
  { severity: 'error', summary: 'Error', detail: 'Message Content' },
  { severity: 'custom', summary: 'Custom', detail: 'Message Content', icon: 'pi-file' },
]
```
==v18==
```html
<p-message severity="success" icon="pi pi-check">Success Message</p-message>
```
```typescript
import { ToastMessageOptions } from 'primeng/api';
import { MESSAGE_ICONS } from 'src/app/core/constants/message-config';

messageIcon = MESSAGE_ICONS;
msgs: ToastMessageOptions[] = [
    { severity: 'success', summary: 'Success', detail: 'Message Content' },
    { severity: 'info', summary: 'Info', detail: 'Message Content' },
    { severity: 'warn', summary: 'Warn', detail: 'Message Content' },
    { severity: 'error', summary: 'Error', detail: 'Message Content' },
    { severity: 'custom', summary: 'Custom', detail: 'Message Content'},
]
```
```typescript
// message-config.ts
const MESSAGE_ICONS = {
  success: 'pi pi-check',
  info: 'pi pi-info-circle',
  warn: 'pi pi-exclamation-triangle',
  error: 'pi pi-times-circle',
  custom: 'pi pi-file'
} as const;
```
### Closable
==v14==
預設情況下 closable 是開啟的，如不需關閉按鈕則設置為 false
```html
<p-messages [(value)]="msgs" [closable]="true"></p-messages>
```
==v18==
預設情況下 closable 是關閉的，如需關閉按鈕則新增屬性 closable
```html
<p-message [severity]="msg.severity" [icon]="messageIcon[msg.severity!]" closable>
  <div>
    <span class="p-message-summary">{{msg.summary}}</span>
    <div class="p-message-detail">{{msg.detail}}</div>
  </div>
</p-message>
```
### Default
==v14==
```html
<p-messages [(value)]="msgs" [closable]="false"></p-messages>
```
==v18==
```html
<p-message [severity]="msg.severity" [icon]="messageIcon[msg.severity!]" *ngFor="let msg of msgs">
  <div>
    <span class="p-message-summary">{{msg.summary}}</span>
    <div class="p-message-detail">{{msg.detail}}</div>
  </div>
</p-message>
```
### With button
==v14==
```html
<p-messages severity="success" *ngIf="isMessages">
    <ng-template pTemplate>
      <img src="assets/showcase/images/primeng.svg" width="32" />
      <div class="p-message-summary">Success</div>
      <div class="p-message-detail">Message Content</div>
      <div style="flex: 1 1 auto"></div>
      <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg mr-8"></button>
      <button type="button" class="p-ripple p-message-close p-link" (click)="delete()">
        <div class="p-message-close-icon pi pi-times"></div>
      </button>
    </ng-template>
</p-messages>
```
==v18==
```html
<p-message severity="success" *ngIf="isMessages" closable>
  <div class="d-flex justify-content-between">
    <img src="assets/showcase/images/primeng.svg" width="32" />
    <div class="p-message-summary">Success</div>
    <div class="p-message-detail">Message Content</div>
    <button pButton type="button" label="Button" class="cub-btn cub-btn-primary cub-btn-lg ml-auto mr-8"></button>
  </div>
</p-message>
```
### Inline Message
==v14==
```html
<div class="d-flex flex-row mb-16">
    <p-message severity="info" text="Message Content" styleClass="p-mr-2"></p-message>
    <p-message severity="success" text="Message Content" styleClass="p-mr-2"></p-message>
    <p-message severity="warn" text="Message Content" styleClass="p-mr-2"></p-message>
    <p-message severity="error" text="Message Content"></p-message>
</div>
```
==v18==
```html
<div class="d-flex flex-row mb-16">
  <p-message class="p-inline-message" severity="info" [icon]="messageIcon['info']" text="Message Content"
    styleClass="p-mr-2"></p-message>
  <p-message class="p-inline-message" severity="success" [icon]="messageIcon['success']" text="Message Content"
    styleClass="p-mr-2"></p-message>
  <p-message class="p-inline-message" severity="warn" [icon]="messageIcon['warn']" text="Message Content"
    styleClass="p-mr-2"></p-message>
  <p-message class="p-inline-message" severity="error" [icon]="messageIcon['error']"
    text="Message Content"></p-message>
</div>
```