No close Icon on p-message

[AlisiaRush]

I am trying to create a simple info box for my Angular app. I am usingAngular version 16. Whenever I try to use the element, I do not see a closing icon. When I try to set closable to true, I get the following error.

Can't bind to 'closable' since it isn't a known property of 'p-message'.
Here is an example of my code:
<p-message severity="info" text="{{ title }}" [closable]="true">

Here is an example of the results in the UI:

I have also tried the following because I need to create a title as well as a message.

{{ title }} {{ message }}

This does not give me an info icon or a close icon. Please help

I have also imported these into my app.module.ts
import { MessageModule } from 'primeng/message';
import { MessagesModule } from 'primeng/messages';

[cetincakiroglu]

p-message doesn't have a closable property yet. It's a property of the p-messages component, you can use p-messages instead. For more info, please visit https://primeng.org/messages#closable

You can request this feature by opening a feature request issue on PrimeNG repo.

[AlisiaRush]

I have used the p-message as well. Here are the results:

There seems to be a missing closeIcon here as well?

[AlisiaRush]

<p-messages [(value)]="title" [enableService]="false" [closable]="true">

[cetincakiroglu]

In the answer, it's suggested to use p-messages component instead of p-message. Both are different.

p-message is the inline message component and it doesn't have a closable property so you can't use it. Only p-messages andtoastsupport closable property.

• Messages => wraps the p-message and inserts some extra visuals, for example close button and it has closable property

• p-message => inline message wrapped by messages component doesn't have closable property so you can't use it.