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, 2022 in TypeSript by Logan
• 2,140 points
2,694 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, 2022 by Nina
• 3,060 points

Related Questions In TypeSript

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, 2022 in TypeSript by Nina
• 3,060 points
1,646 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, 2022 in TypeSript by Nina
• 3,060 points
3,250 views
0 votes
0 answers

What is a type in Typescript for the Component class in Angular 2+?

I have a small problem, but big ...READ MORE

Jul 5, 2022 in TypeSript by Logan
• 2,140 points
508 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,350 points
2,630 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,190 points
1,193 views
0 votes
1 answer
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, 2022 in Others by Rahul
• 9,670 points
18,123 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, 2022 in TypeSript by Nina
• 3,060 points
1,280 views
0 votes
1 answer

Angular ForEach in Typescript?

Try this: selectChildren(data, $event) { ...READ MORE

answered Jun 7, 2022 in TypeSript by Nina
• 3,060 points
1,033 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP