How can I apply custom CSS to a Toast with ng2-izitoast?

Question

I want to apply a custom Style to the Toasts I show with izitoast in my Angular application. I have installed and included the library according to instructions here I have included the izitoast css and script in my angular.json in addition to adding the module in my app-module and also managed to display a toast with a button in a component:

html-template (toaster.component.html)

<p>toaster works!</p>
<div><button (click)="produceToast()">Test Toast</button></div>

corresponding typescript file (toaster.component.ts)

import { Component, OnInit } from '@angular/core';
import {Ng2IzitoastService} from "ng2-izitoast";

@Component({
  selector: 'app-toaster',
  templateUrl: './toaster.component.html',
  styleUrls: ['./toaster.component.scss']
})
export class ToasterComponent implements OnInit {

  constructor( public iziToast: Ng2IzitoastService) { }

  ngOnInit() {
  }

  public produceToast() {
    this.iziToast.show({ title: "Hello World"});
  }

}

I understand that if I want to apply custom styling I have to somehow specify the class in the object I pass into the the show()-function, but how do I do that? Writing a CSS-class in my toaster.component.css and just referencing the name doesn't work:

.myOwnToastClass {
  background-color: blueviolet;
  color: white; //font-color
}

Adding the class into my styles.css doesn't work either. Neither {class: "myOwnToastClass", title: "Hello World"} nor {class: ".myOwnToastClass", title: "Hello World"} do anything. Can someone tell me how to pass my own custom CSS to a toast? The documentation simply says "class: The class that will be applied to the toast. It may be used as a reference." but other than that there is no documentation on how to use it.

What do you mean by `doesn't work`? Have you checked whether the class is added to the toast in your browser? Maybe the class gets added but the styles of that class are overwritten by something else. — frido, Jan 18 '19 at 15:33
The class doesn't get added to the toast nor to any created
of the toast. I checked. — Keya Kersting, Jan 18 '19 at 16:21
It works for me, I tested it. There must be something wrong at your end. Could you copy paste your exact code in your question. Unfortunately I can't get ng2-izitoast working in stackblitz. Does everything else work except for adding `classes`? — frido, Jan 18 '19 at 17:47
Download this project and build it localy: https://stackblitz.com/edit/angular-xio1zm This is working for me. (izitoast isn't working in stackblitz you have to download it and serve on your machine) — frido, Jan 18 '19 at 18:19
Yes it works. But the important part (pun intended) is the "!important" in your CSS, which frankly if I want to have multiple styles is pretty ugly. So it only works if I put my CSS in the styles.css and only if I add the !important modifier to it. And even then it doesn't work for everything. Although you can already change a lot of things around directly in the object you pass to the function. Thanks for helping me though, it works now. I really appreciate it :) — Keya Kersting, Jan 22 '19 at 09:03
Btw, I think I oversaw the class in the produced div's. So I'm sorry for that. — Keya Kersting, Jan 22 '19 at 09:39

score 1 · Accepted Answer · answered Jan 22 '19 at 09:17

1

Okay. So thanks to user fridoo I was able resolve it.

You have to add the class to your styles.css and be careful about the !important modifier:

.myOwnToastClass {
  background-color: blueviolet !important;
  border-radius: 0 !important;
  //color: white; // you can't change the font-color with this
                  // you have to use the object-properties in the ts-file
}

Then reference it in the typescript files like so:

public produceToast() {
    this.iziToast.show({class: "myToastClass", title: "Hello World", timeout: 3000, titleColor: "#ffffff"});
        // titleColor: "white" would also work, I think it's a css-class somewhere in the background
  }

answered Jan 22 '19 at 09:17

Keya Kersting

135
1
1
8

1

You have to use `!important` because you're overwritting existing styles. If you want to add your styles to the components css file instead of your global `styles.css` you could use `::ng-deep` before the css selector, e.g. `::ng-deep .myOwnToastClass { ... }`, but note that [ng-deep is deprecated](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep). The styles won't apply otherwise because of [Angular's ViewEncapsulation](https://angular.io/guide/component-styles#view-encapsulation). You could [turn off ViewEncapsulation](https://stackoverflow.com/a/51710912/9423231). – frido Jan 22 '19 at 09:51

How can I apply custom CSS to a Toast with ng2-izitoast?

1 Answers1