Apply styling to angular toast from within a component method - css

Question

I need to apply a styling to a toast that will be used when a particular function is called. How do I do that?
toast.service.ts
import { Injectable, OnInit } from '#angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
#Injectable()
export class ToastrService {
public toasterStatus: BehaviorSubject<Message>;
constructor() {
this.toasterStatus = new BehaviorSubject<Message>(null);
}
showToaster(type: string, content: string) {
const toasterObj: Message = { severity: type, detail: content };
this.toasterStatus.next(toasterObj);
}
}
export interface Message {
severity: String;
detail: String;
}
my-component.ts
import { ToastrService } from '../../../toast.service';
#Component({
selector: '...',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
constructor(private logService: LogService,
private toastrService: ToastrService,){...}
ngOnInit() {
this.idSubscription$ = this.route.params.subscribe(params => {
this.id = +params['id'];
});
this.logService.debug(this.id);
// check for error
if (my.error) {
this.logService.error('Error retrieving report templates.', reportTemplatesState);
this.toastrService.showToaster('danger', 'Error retrieving report templates.');
}
});
//I need to apply the styling below to this toastrService element within the component method
my.component.css
.toastSticky{
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

Answer 1

You do this with the documentation :
MatSnackBarConfig
Configuration used when opening a snack-bar.
panelClass: string | string[] Extra CSS classes to be
added to the snack bar container.