How to add custom css to the single Toast message in Angular?

MY QUESTION :

How to add css to the single Toast used in components in Angular, as there can be multiple toast but i want to change a single toast?
Eg toast image : example toast

I want to add my css to the particular toast message.So, that i can align message text in the center i.e File Import started..

how my Angular directory looks like

| app
|
|-components
| |
| |-test [/app.ts , /app.css]
|
|style.css


What I Tried :

1. I added the following codes to my CSS and TS code :

my rough app.css code

.test {
text-align : center !important // I tried without ! important also
}


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 tried \" test \" also

this.toastr.success('<span class="test">File import started</span>', '', {

enableHtml : true //even I have added the messageClass : 'test'
});
}
}

HOW IT WORKED BUT I DON'T WANT THESE WAYS :

1. by putting my css code into the style.css (main global css) (X I don't want to change my main style)
2. by adding ::ng-deep .test instead of .test : this is harmful it will change all my toast-dialogue.
3. by adding encapsulation: ViewEncapsulation.None in @component : but this will change my other Css.
4. by using <center> tag : still i don't want to do it because it will fix my issue but what if i want to add multiple css.

How can I achieve this?

Continue reading...