Styles broken in custom toast

Hi, I have a problem with my custom toast. I want to replicate the example in the docs (the pink toast). All works ok unless the styles. The toast seems to be broken because of the css. Is there any dependencie (like bootstrap for example) needed to have a good custom toast?

without custom component:

My code :

import { Router } from '@angular/router';
import {
  animate,
  keyframes,
  state,
  style,
  transition,
  trigger
} from '@angular/animations';
import { Component } from '@angular/core';
import { Toast, ToastrService, ToastPackage } from 'ngx-toastr';

@Component({
  selector: 'app-snackbar-message',
  templateUrl: './snackbar-message.component.html',
  styleUrls: ['./snackbar-message.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({
        display: 'none',
        opacity: 0
      })),
      transition('inactive => active', animate('400ms ease-out', keyframes([
        style({
          transform: 'translate3d(100%, 0, 0) skewX(-30deg)',
          opacity: 0,
        }),
        style({
          transform: 'skewX(20deg)',
          opacity: 1,
        }),
        style({
          transform: 'skewX(-5deg)',
          opacity: 1,
        }),
        style({
          transform: 'none',
          opacity: 1,
        }),
      ]))),
      transition('active => removed', animate('400ms ease-out', keyframes([
        style({
          opacity: 1,
        }),
        style({
          transform: 'translate3d(100%, 0, 0) skewX(30deg)',
          opacity: 0,
        }),
      ]))),
    ]),
  ],
  preserveWhitespaces: false,
})
export class CustomToastComponent extends Toast {
  undoString = 'undo';

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
    private router: Router
  ) {
    super(toastrService, toastPackage);
  }

  action(event: Event) {
    event.stopPropagation();
    this.undoString = 'undid';
    this.toastPackage.triggerAction();
    return false;
  }
}

HTML:

<div>
  <div>
    <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
      {{ title }}
    </div>
    <div *ngIf="message && options.enableHtml" role="alert" aria-live="polite" [class]="options.messageClass"
      [innerHTML]="message">
    </div>
    <div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite" [class]="options.messageClass"
      [attr.aria-label]="message">
      {{ message }}
    </div>
  </div>
  <div>
    <a *ngIf="!options.closeButton" class="btn btn-pink btn-sm" (click)="action($event)">
      {{ undoString }}
    </a>
    <a *ngIf="options.closeButton" (click)="remove()">
      close
    </a>
  </div>

Thanks in advance!

[barelabs]

@Aw3same To solve your issue, I’d change your selector to an attribute selector with brackets around: [‘app-snackbar-message’].

The css from the pink toast was working fine when using the source code as copied from the example in the readme (where the styles, html, and component are all defined in one file) (file is located at https://github.com/scttcper/ngx-toastr/blob/master/src/app/pink.toast.ts).

But once I created a new component using the angular cli to refactor the example code into its own html, css, and typescript files, the css broke. “I didn’t change anything though!!,” I told myself. Yet, I had the same exact results of broken styles as shown by @Aw3same – I did change something though. I did not ensure that the selector was updated from the readme so it has brackets around it.

So make sure the selector reads as below:

selector: ‘[pink-toast-component]’ or selector: ‘[app-snackbar-message]’ (whatever your component is of course). Just make sure the brackets are around the name so it’s an attribute selector.

Using a default selector such as one outputted by angular ( selector: ‘pink-toast-component’ or selector: ‘app-snackbar-message’,) with no brackets will result in the broken css.

Hope this helps someone, as I found this solution easier than rewriting the css from ground up.

[SergeyCherman]

Are you sure you have bootstrap css imported? I had the same issue as I don’t use bootstrap and just ended up using flexbox to style my custom component, ie display:flex at root of component.