4

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?

Improve this question
6
  • 1
    Why do you think ::ng-deep solution is harmful? You can add messageClass to your toast (i.e. messageClass: 'exampleToast') and use ::ng-deep .exampleToast .test { //write your custom css here } to style only your toast component. Commented Oct 28, 2020 at 8:41
  • 1
    hi @ilkengin thanks for replying and your solution worked .. I tried messageClass : 'test' and then .test { text-align :center} it was not working and now after ng-deep it worked. I misunderstood the concept I thought that it will change my all toast styling.. Commented Oct 28, 2020 at 9:18
  • @ilkengin could you put some light why and how it worked .. I will be thankful Commented Oct 28, 2020 at 9:20
  • actually yesterday i used ::ng-deep .test (my point 2) .. and what i faced was my all toast changed (maybe some syntactical mistake).. Commented Oct 28, 2020 at 9:39
  • Well, when you say ::ng-deep .test you are styling the span with test class added (see your code). However, messageClass adds the class to your toast message itself (not the span). Therefore, when you say ::ng-deep .exampleToast .test, it means style the element with class test, inside anouther element with class exampleToast. Also, ng-deep helps you search for every element in the DOM matching with your criteria. If you don't add ng-deep Angular only searchs for matching element in your component's html only. I hope I could help :) Commented Oct 28, 2020 at 9:40

3 Answers 3

Reset to default
3

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

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

5 Comments

hi @AntonioVida .. thanks for the reply, but i tried this .. see my point in how it worked section (i solved it by 4 ways)... I don't want to add my css to style.css file instead this i need to add in app.css ..is it possible?
maybe i misunderstood the concept. still Is it possible? or it can't be possible because of runtime styling and toast can only read style.css(i.e is our main style file).
Hi @ADARSHKUMARCHOUDHARY, I've updated the answer and demo. It's possible if you use your own custom toast component.
hi , see the comments less code and it will work and thank you for posting the solution (your solution will also work).. just by adding a field messageClass : 'my custom class' ... then in css file just use ::ng-deep .my custom class { add your code here}
Great. I write down this way too! Thanks!
1

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.
    });
  }
}
Improve this answer

2 Comments

hi it's message not title . so i used messageClass : 'test' , also i used your solution too .. but not worked.
your solution also works with messageClass .. if I use ::ng-deep .test {} in css . thanks
0 
.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);
}
Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.