How to set up styleClass inside ts file? - css

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)

Answer 1

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.

Answer 2

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;
}