CODEWITHSUNDEEP
cssangulartypescripttoasttoastr
ADARSH KUMAR CHOUDHARY
ADARSH KUMAR CHOUDHARY

Reputation: 43

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?

Upvotes: 4

Views: 15832

Answers (3)

user29104364
user29104364

Reputation: 1

.success-message {
    text-align: center;
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success-message__icon {
    max-width: 75px;
}

.success-message__title {
    color: #3DC480;
    transform: translateY(25px);
    opacity: 0;
    transition: all 200ms ease;
}

.success-message__title {
    transform: translateY(0);
    opacity: 1;
}

.success-message__content {
    color: #B8BABB;
    transform: translateY(25px);
    opacity: 0;
    transition: all 200ms ease;
    transition-delay: 50ms;
}

.success-message__content {
    transform: translateY(0);
    opacity: 1;
}

.icon-checkmark circle {
    fill: #3DC480;
    transform-origin: 50% 50%;
    transform: scale(0);
    transition: transform 200ms cubic-bezier(.22, .96, .38, .98);
}

.icon-checkmark path {
    transition: stroke-dashoffset 350ms ease;
    transition-delay: 100ms;
}

.icon-checkmark circle {
    transform: scale(1);
}

Upvotes: 0

Antonio Vida
Antonio Vida

Reputation: 872

You need to apply titleClass and messageClass when your toast is used and overwrite the css background-image to align icon and text:

 showSuccess() {
    this.toastr.success("Hello world!", "Toastr fun!", {
      titleClass: "center",
      messageClass: "center"
    });
  }

Add css class in your global styles:

Styles.css:

.center {
  text-align: center;
}

.toast-success {
  padding-left: 80px;
  text-align: center;
  background-position: 35% !important;
}

Or use with :ng-deep if you want to add it in your component's styles css:

app.component.css

:ng-deep .center {
  text-align: center;
}

Other alternative is create your own toast component extending Toast and use it customising its template adding a css class for centering the text.

Using a Custom Toast

The issue in this case is that you can't override the css background-image property to align icon and text. You can only do that in styles.css

Changing default icon styles

Here's the Demo:

https://stackblitz.com/edit/ngx-toastr-angular2-4pqrqw

Upvotes: 3

Noman Fareed
Noman Fareed

Reputation: 284

You can use the titleClass property to apply the css class on the toast message.

import {ToastrService} from 'ngx-toastr';

@Component({
  selector: 'my-app',
  templateUrl: './app.html',
  styleUrls: [ './app.css' ]
})

export class app {
  constructor(private toastr: ToastrService) {}

  showSuccess() { 
    this.toastr.success('File import started', '', {
      messageClass: 'test'// this will apply the test class to the toast title.
    });
  }
}

Upvotes: 1

Related Questions