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
– frido, Commented Jan 18, 2019 at 15:33
The class doesn't get added to the toast nor to any created <div> of the toast. I checked. — Keya Kersting
– Keya Kersting, Commented Jan 18, 2019 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
– frido, Commented Jan 18, 2019 at 17:47
Download this project and build it localy: 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
– frido, Commented Jan 18, 2019 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
– Keya Kersting, Commented Jan 22, 2019 at 9:03

Keya Kersting · Accepted Answer · 2019-01-22 09:17:30Z

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, 2019 at 9:17

Keya Kersting

1351 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

frido Over a year ago

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. The styles won't apply otherwise because of Angular's ViewEncapsulation. You could turn off ViewEncapsulation.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related