Customise Ngx-toastr in angular 6 with TypeScript

0 votes

I'm implementing Ngx-toastr in angular 6 with typescript.

The problem is that I can't make it look presentable because I don't know which CSS is override on that ngx-toastr class I wrote some CSS on Style.css file ngx-toastr and I want border-radius: 15px; but inner part not taking rounded corner with border-radius: 15px; 

This is my Css Code

.toast-container .ngx-toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    border-radius: 15px !important;
    background-position: 15px center;
    background-repeat: no-repeat;
    background-size: 24px;
    box-shadow: 0 0 12px #999;
    color: #fff;
    border-image-source: linerar-gradient(red,purple) !important;
    border: 4px solid green !important;
    border-image-source: linear-gradient(red, purple) !important;
    border-image-slice: 20 !important;
}

.toast-success {
    background-color: #51a351;
}

But My Expectation is I want same as in this picture if u want to check then visit this link and click on RESET button to show toastr Click Here to visit that site

enter image description here

Jun 8 in TypeSript by Logan
• 1,580 points
7 views

1 answer to this question.

0 votes

After Override this CSS in your Style.css File. I was able to customize this ngx-toastr with overriding this CSS

.toast-container {
  background-image: linear-gradient(purple,red) !important;
  border-radius: 22px !important; 
  box-shadow: -5px 8px 16px 0px rgba(0,0,0,0.3) !important;
  margin-bottom: 2px !important;
}

.toast-container .toast {
  margin: 2px !important;
  box-shadow: none !important;
  border-radius: 20px !important;
  background-color: #fff !important;
}

.toast-success{
  background-image: none !important;
}

.toast-success::after{
  content: '\f00c' !important;
  font-family: 'FontAwesome' !important;
  position: absolute !important;
  top: 14px !important;
  left: 15px !important;
  color: #333 !important;
  font-size: 1.5em !important;
}

.toast-title{
  color: purple !important;
  font-size: 16px !important;
}

.toast-message{
  color:#8f8f8f !important;
}
answered Jun 9 by Nina
• 2,900 points

Related Questions In TypeSript

0 votes
0 answers

Angular ForEach in Typescript?

I see many answers about using ngFor ...READ MORE

Jun 3 in TypeSript by Logan
• 1,580 points
18 views
0 votes
1 answer

Angular/TypeScript: ng-multiselect-dropdown multiple properties in TextField

I was able to work around this ...READ MORE

answered Jun 13 in TypeSript by Nina
• 2,900 points
8 views
0 votes
1 answer
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31 in TypeSript by Nina
• 2,900 points
16 views
0 votes
1 answer

Cannot access web3 object with typescript and ethereum

You still need to instantiate it first. ...READ MORE

answered Sep 25, 2018 in Blockchain by slayer
• 29,310 points
1,800 views
0 votes
1 answer

How to apply zoom animation for each element of a list in angular?

Hey @Sid, do check if this link ...READ MORE

answered Jul 30, 2019 in Others by Vardhan
• 13,200 points
471 views
0 votes
1 answer

Can't bind to 'formGroup' since it isn't a known property of 'form'

In order to rectify this error, you ...READ MORE

answered Feb 10 in Others by Rahul
• 8,980 points
411 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1 in TypeSript by Nina
• 2,900 points
15 views
0 votes
1 answer

How to use useState hook in React with TypeScript correctly?

Without any initial argument, the type of email and setEmail will ...READ MORE

answered Jun 10 in TypeSript by Nina
• 2,900 points
10 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP