CODEWITHSUNDEEP
angularprimengconfirmation
Kicker
Kicker

Reputation: 606

primeNG confirm dialog message show as html

I need to show confirm dialog message as html, this is how looks my dialog in component:

this.confirmationService.confirm({
        header: "Change user status",
        message: "Do you want to change user status to <strong>" + status + "</strong >?",
        accept: () => {
            //
        }
    });

and this is how it looks like on a page:

enter image description here

I tried to do this two ways but without success

<p-confirmDialog width="500" appendTo="body">
<template pTemplate="body">
    <span class="ui-confirmdialog-message">{{message}}</span>
</template>


<p-confirmDialog width="500" [innerHTML]="message"></p-confirmDialog>

Upvotes: 3

Views: 12250

Answers (2)

Chau Tran
Chau Tran

Reputation: 5088

PrimeNG ConfirmDialog's message element class is ui-confirmdialog-message

Set up a property (e.g: message) in your ts file

public message: string;
        
this.confirmationService.confirm({
     header: "Change user status",
     message: this.message,
     accept: () => {
                //
     }
});

this.message = document.getElementsByClassName('ui-confirmdialog-message')[0].innerHTML = "Do you want to change user status to <span id='someOtherId'>" + status + "</span >?"

Then in your root styles.css, add this:

.ui-confirmdialog-message span#someOtherId { color: yourColor};

You can console.log "document.getElementsByClassName('ui-confirmdialog-message')" first to see what's in it. I got an array and the [0] element contains my initial ConfirmDialog message.

There might be a better way but I just happened to tackle this after seeing your question and it worked for me.Check this result

Upvotes: 1

PMO1948
PMO1948

Reputation: 2554

so this is kind of old, but for the future- the solution is to change the quote type of message.

so, change

 message: "Do you want to change user status to <strong>" + status + "</strong >?",

to

 message: `Do you want to change user status to <strong>" + status + "</strong >?`,

Upvotes: 4

Related Questions