How to set up styleClass inside ts file?

Question

I want to create css element inside ts file and pass it as a styleClass to PrimeNg Toast.

var style = document.createElement('style');
style.innerHTML = '::ng-deep .cssClass { background-color: #e62323; border: solid #8A427A; border-width: 0 0 0 6px; color: #2c1e30; }';
this.messageService.add({severity:'custom', summary:'Service Message', detail:'Via MessageService', styleClass: 'cssClass', sticky: true});

The above code is not working for me, style is not applied. Could someone help me with that?

EDIT: I tried to catch the p-toast and append style but it's not applied still.

setTimeout(() => {
  let message = document.getElementsByClassName('p-toast-message-custom')[0];
  message.appendChild(style);
}, 100)

I don't know how, because it's a p-toast so it's not available from the beginning, only when it appears — user18974278, Feb 20 '23 at 09:03

score 1 · Answer 1 · answered Feb 20 '23 at 07:56

In Angular we should not set a style with directly DOM manipulation. The reason is:

Angular cannot detect changes if you do this by hand
Angular render components and create and update the DOM.

So its possible, but not a good way. In your case, set append the element to the DOM. Then it will works, I think.

The Angular Way

Each component has it one contained CSS/SCSS.

What you can do is to use Angulars board means, like ngStyle, ngClass and so on. example:

<div [ngStyle]="{'background-color':'green'}"></<div>

You can do it with property binding, too:

// Code
getColor(country) { (2)
    switch (country) {
      case 'UK':
        return 'green';
      case 'USA':
        return 'blue';
      case 'HK':
        return 'red';
    }
  }

// Html
<div [ngStyle]="{'color':getColor(person.country)}">Test</div>

ngClass does the same but let you set a class flexible to any component.

// Code
val: number = 9;

// Html
<td [ngClass]="val > 10 ? 'red' : 'green'">{{ val }}</td>

Link to ngClass docu, link to ngStyle docu.

ngStyle will not work in my case I think, because it refers to general p-toast component. This is not overwritting the style: — user18974278, Feb 20 '23 at 09:02

score 0 · Answer 2 · answered Feb 20 '23 at 08:22

To add a class to a message using PrimeNG's MessageService, you can use the add method and provide an optional options object that includes a styleClass property.

Here's an example code snippet that demonstrates how to add a class to a message:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="showSuccess()">Show Success Message</button>
  `,
  providers: [MessageService]
})
export class MyComponent {
  constructor(private messageService: MessageService) {}

  showSuccess() {
    this.messageService.add({severity:'success', summary:'Success', detail:'Message Content', 
      options: {styleClass: 'my-custom-class'}});
  }
}

.my-custom-class {
  background-color: #b3ffb3;
  color: #006600;
  border: 1px solid #006600;
  border-radius: 5px;
  padding: 10px;
}

The problem is that I have the color values inside ts class, because they need to be set dynamically — user18974278, Feb 20 '23 at 08:27
That class should be added to the p-messages component, not within the service: https://github.com/primefaces/primeng/blob/master/src/app/components/messages/messages.ts — Zsolt Balint, Feb 20 '23 at 09:53

How to set up styleClass inside ts file?

2 Answers2

The Angular Way