MY QUESTION :
I am looking to customize the CSS of a single toast used in Angular components. While there may be multiple toasts, I specifically want to style one particular toast differently.For example, the toast image can be viewed here: example toast
The goal is to add custom CSS to this specific toast message so that I can center align the text, such as "File Import started.."
This is how my Angular directory is structured:
| app
|
|-components
| |
| |-test [/app.ts , /app.css]
|
|style.css
What I Tried :
- I attempted to modify both the CSS and TS code as follows:
My rough app.css code:
.test {
text-align : center !important // I also tried without ! important
}
My rough app.ts code
import { Component } from '@angular/core';
import {ToastrService} from 'ngx-toastr';
@Component({
selector: 'my-app',
templateUrl: './app.html',
styleUrls: [ './app.css' ]
})
export class app {
constructor(private toastr: ToastrService) {}
showSuccess() {
// I also tried using \"test\"
this.toastr.success('<span class="test">File import started</span>', '', {
enableHtml : true //even with messageClass : 'test' added
});
}
}
HOW IT WORKED BUT I DON'T WANT THESE APPROACHES:
- Adding the CSS code into the global style.css (X I prefer not to change main styles).
- Using
::ng-deep .test instead of .test: although effective, it affects all toast dialogues. - Applying
in @component: alters other CSS styles.encapsulation: ViewEncapsulation.None - Using
<center>tag: while a quick solution, limits adding additional CSS rules.
How can I achieve this customization for a single toast?