CODEWITHSUNDEEP
angulartoastr
Marvin W.
Marvin W.

Reputation: 907

ngx-toastr, Toast not showing in Angular 7

I'm currently developing a web app using Angular 7. I wanted to include ngx-toastr to send notifications to users but it isn't working as expected. When I trigger a toast nothing happens, except for a box in the size of a toast is appearing in bottom right corner but only when hovered over by the coursor. Following an example of how I trigger the toastr function. Test is invoked by the click of a button.

import {ToastrService} from 'ngx-toastr';
@Component({
  selector: 'app-action-controls',
  templateUrl: './action-controls.component.html',
  styleUrls: ['./action-controls.component.scss']
})
export class Notification implements OnInit {
  test(){   
          this.toast.success("I'm a toast!", "Success!");
  }
 constructor(private toast: ToastrService) { }
}

I includet the library css files in the angular.json file in my project like this:

     ...        
     "styles": [
        "src/styles.scss",
        "node_modules/bootstrap/scss/bootstrap.scss",
        "node_modules/ngx-toastr/toastr.css"
      ],
      ...

And like this in my app.module.ts file:

...
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ToastrModule} from 'ngx-toastr';
...
  imports: [
    ...
    BrowserAnimationsModule,
    ToastrModule.forRoot({
      timeOut: 1000,
      positionClass: 'toast-bottom-right'
    })
   ]
...

I can't figure out what i'm doing wrong, has anyone had similar experiences?

Upvotes: 61

Views: 95409

Answers (18)

Santhosh Reddy
Santhosh Reddy

Reputation: 1

copying toastr.css code to my angular project styles.css file worked.

Upvotes: 0

Tung
Tung

Reputation: 1671

When reading through this thread, I guess you could fix your problem. However, I would leave the solution to my problem here unless someone might have the same as us.

What I have done to fix the problem is: to add @import '~ngx-toastr/toastr.css'; into style.css under the root directory of the project will get rid of the issue.

Upvotes: 41

Allie Moosa
Allie Moosa

Reputation: 793

If you are still looking for an easy solution I just added the following line to global styles.css:

@import '~ngx-toastr/toastr.css'

and it worked

Upvotes: 2

Sai Sreenivas
Sai Sreenivas

Reputation: 21

I have imported ~ngx-toastr/toastr.css but it was not working. So, I have copied all the CSS present in the above file and pasted it in my styles.css.

It's working for me.

Upvotes: 0

Oliver
Oliver

Reputation: 581

In my case, It was due to a conflict between some CSS. I overwrote that CSS by simply importing the styles of ngx-toastr in styles.css

styles.scss

@import '~ngx-toastr/toastr.css';

Upvotes: 6

Gauri Shukla
Gauri Shukla

Reputation: 319

I have imported ~ngx-toastr/toastr.css in my style.css of angular app used

  @import '~ngx-toastr/toastr.css';

Upvotes: 1

Akitha_MJ
Akitha_MJ

Reputation: 4294

In my case I have done to fix the problem is: by adding

 @import '~ngx-toastr/toastr.css';

into style.css - Main Style in root folder of your angular app

Upvotes: 1

Sami Haroon
Sami Haroon

Reputation: 909

For Angular - Material or any angular project we SHOULD need to import modules in sequence like this in your app.module.ts: 

imports: [
 BrowserModule,
 BrowserAnimationsModule,
 ToastrModule.forRoot({
    timeOut: 3000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
    closeButton: true
 })
]

Upvotes: 0

Nismi Mohamed
Nismi Mohamed

Reputation: 762

Check the dependency.

ngx-toastr dependency

OR

Try fixing the css import or

you can copy the css from here toastr.css and past it inside your global css or

create a new css file and add that file path in

angular.json -> styles: [..., "your/style/path/toastr.css"]

Upvotes: 0

Buzzzzzzz
Buzzzzzzz

Reputation: 1204

you need to import 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

and add that under the @NgModule imports

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
   ......
  ],
  imports: [
     ......
    BrowserAnimationsModule,
    ToastrModule.forRoot({ timeOut: 2000 enableHtml: true }),
  ],
  providers: [
    ToastService,
     ......
  ],
  bootstrap: [AppComponent]
})

Upvotes: 2

seawave_23
seawave_23

Reputation: 1248

For me, non of these solutions helped. What I did in the end was to set this in the Angular.json for the production configuration:

    "extractCss": false

Upvotes: 0

Dougster
Dougster

Reputation: 11

I came across this issue again. The resources above said it was fixed but not for me. Even after getting the latest resources for both bootstrap and toastr. After much investigations I found that simply adding '!important' to the relevant toastr alert type backgrounds resolved this for me. See code below.

.toast-success{background-color:#51A351!important;}
.toast-error{background-color:#BD362F!important;}
.toast-info{background-color:#2F96B4!important;}
.toast-warning{background-color:#F89406!important;}

Although not good practice, I added the code the .min.css file. We do however host these files in our AWS CloudFront CDN and there is no need for duplicate CDN's.

Upvotes: 1

Ande Caleb
Ande Caleb

Reputation: 1204

i had this issue and i noticed that it was working but wasnt rendering the CSS properly, so then i checked the node_modules/toastr folder and realized that there were other CSS files, try including all the css files, because that worked for me.

add the css files in your angular.json file and try running yoru application again.

 "styles": [              
          "./src/assets/css/bootstrap.min.css",
          "......",              
          "./node_modules/ngx-toastr/toastr.css",
          "./node_modules/ngx-toastr/toastr-old.css",
          "./src/styles.css",
          ".......",
          "......",
          "./node_modules/@fortawesome/fontawesome-free/css/all.min.css"
       ],

Upvotes: 3

Pranav S
Pranav S

Reputation: 425

Even after adding the opacity css code from the above answers in my global style.scss, it did not solve my problem entirely; I was getting a blank white box.

After adding the additional css mentioned in this GitHub post, the toasts are working correctly.

The relevant code from the above post is below:

/* TOASTR BUGFIX */
#toast-container > div {
  opacity: 1;
}
.toast {
  font-size: initial !important;
  border: initial !important;
  backdrop-filter: blur(0) !important;
}
.toast-success {
  background-color: #51A351 !important;
}
.toast-error {
  background-color: #BD362F !important;
}
.toast-info {
  background-color: #2F96B4 !important;
}
.toast-warning {
  background-color: #F89406 !important;
}

Upvotes: 17

James
James

Reputation: 2884

I know this question is 3 months old but just to inform everyone of the latest changes. ngx-toastr v10.0.2 no longer has this bug with bootstrap v4.2.1

So updating your ngx-toastr should fix this issue. It did for me :)

https://github.com/scttcper/ngx-toastr/releases

Upvotes: 5

Pieter De Bie
Pieter De Bie

Reputation: 1212

An alternative to Keenan Diggs' answers is providing an additional style class in the ToastrModule definition which sets opacity to 1. IMO this is a bit more clear what we're trying to achieve here and also doesn't have to depend on #toast-container.

app.module.ts:

ToastrModule.forRoot({
  toastClass: 'toast toast-bootstrap-compatibility-fix'
}),

Don't forget the original toast class.

Your (s)css file:

.toast-bootstrap-compatibility-fix {
  opacity:1;
}

Upvotes: 4

Alain Boudard
Alain Boudard

Reputation: 863

This is deeply linked to the new bootstrap version that comes with Toasts. Here is an issue discussing it :

https://github.com/ng-bootstrap/ng-bootstrap/issues/2945

I myself did keep the "old" 4.1.3 bootstrap, and will keep an eye on next ng-bootstrap version, that way I don't hack the css :)

#toast-container > div {
  opacity:1;
}

Upvotes: 6

Keenan Diggs
Keenan Diggs

Reputation: 2342

I was able to make a minimal reproduction of your issue, and I don't see any problems: https://stackblitz.com/edit/angular-avcidu

Is it possible that you have some custom styles that conflict with the toastr.css styles, or a template that is malformed (an unclosed div, for example)?

Are you using the latest version of ngx-toastr? (9.1.1 at the time of this post)

What does your template look like?

Update:

The previous stackblitz now shows the replicated problem. Here is the link again: https://stackblitz.com/edit/angular-avcidu

Looks like both bootstrap and ngx-toastr use the .toastr class, affecting the opacity property on the toastr div.

This thread has a workable answer: Setting toastr opacity?

The answer therein is to force the opacity to 1. Add this your custom stylesheet:

#toast-container > div {
    opacity:1;
}

And here's the working stackblitz: https://stackblitz.com/edit/angular-gjazzq

Upvotes: 95

Related Questions