Kendo UI angular DialogService - Change the title bar background color

Question

I would like to be able to change the background-color of the resulting dialog created with the kendo UI angular's DialogService.

It's easy to adapt the content of the dialog or even override the background-color via scss but only for one fixed color while I need to chose from a few.

So I'm thinking either set the color at runtime or at least set a class on the wrapper so I can style them via scss.

Any idea?

Answer 1

I worked a solution for this. It works but it is not elegant one bit.

Here's the plunker link that demonstrates the code : http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview

Here's the related code in the service:

const dialog: DialogRef = this.dialogService.open({
  actions: message.actions,
  content: MessageComponent,
  title:   message.title
});

const messageComponent = dialog.content.instance;
messageComponent.message = message;

//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );

return dialog.result;

And the scss:

$error: #c13;
$success: #0c5;

.kendo-override {

  &.error {
    kendo-dialog-titlebar {
      background-color: $error;
    }
  }

  &.success {
    kendo-dialog-titlebar {
      background-color: $success;
    }
  }
}