0

i want to do global toasts service in my application with own styles and html for toasts. I'm using ng2-toastr. For example i have component A. In view i have button:

<button (click)="showSuccess()">Click</button>

in controller i have showSuccess function : 

showSucess() {
    this.toastrService.showSuccess({
      enableHTML: true,
      toastLife: 3000,
    });
  }

In my ToastrService i have my showSuccess function:

  import { Injectable } from '@angular/core';
  import { ToastsManager } from 'ng2-toastr/ng2-toastr';

  @Injectable()
  export class ToastrService {
    constructor(public toastr: ToastsManager) {}
    showSucess() {
      this.toastr.custom('<span style="color: #bd362f">This message should be in red with blank background. Click to dismiss.</span>',
      'Custom Message', {dismiss: 'click'});
    }
  }

this.toastr.custom - in this function i set my own toast template. Now, i want to do component with this template, because i want to remove this template from service.

How can i replace this string with HTML with component? I want to replace this string with innerHTML of component, or something like this. I want share in this component with toasts options from component from the top of my question.

In AngularJs i used $templateCache to get html from file, but in angular2 + i cann't find something like this.

hirse
  • 2,394
  • 1
  • 22
  • 24
Eugeniusz Zuev
  • 149
  • 4
  • 15

1 Answers1

0

I guess you can't use a component instead of an string with the html markup. Take a look here at the source code.

Line 158 has the custom method:

custom(message: string, title?: string, options?: any): Promise<Toast>

you must provide a string, not a component.

What you can do is read this from an external file, like a json, using the HttpClient.

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
  • Yes, in this function i could use only string. Maybe in Angular4 is something like ElementRef for service, to get access to component, or to init component from service? – Eugeniusz Zuev Oct 20 '17 at 16:32
  • Maybe with DynamicComponentLoader: https://angular.io/guide/dynamic-component-loader but I don't see why to use this (too much development for 'only' get an html markup that could be stored in a config/messages file) – Christian Benseler Oct 20 '17 at 16:51