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:

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>

回答1:

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

来源：https://stackoverflow.com/questions/44063027/primeng-confirm-dialog-message-show-as-html

标签

angular

primeng

confirmation