Add Hyperlink To Angular 2 Toast Message

Question

I am using Angular 2 and I was wondering if it's possible to add a hyperlink to a toast message. I poked around online and saw some stuff that might work but I was wondering if there is a clear cut and easy way to implement this. Thanks!

Edit: Or if there is a way to navigate to a different url by clicking on a toast message

Answer 1

There are two different approaches for embedding any sort of HTML content within a toast.

By importing BodyOutputType from angular2-toaster, you can specify either TrustedHtml or Component. The first allows you to pass the html directly into the body argument of the toast:

import { BodyOutputType } from 'angular2-toaster';

popTrustedHtmlToast() {
    var toast: Toast = {
      type: 'info',
      title: 'Here is a Toast Title',
      body: '<a target="_blank" href="https://www.google.com">Here is a Toast Body<a/>',
      bodyOutputType: BodyOutputType.TrustedHtml,
      showCloseButton: true 
    };

    this.toasterService.pop(toast);
}

The second allows you to pass the name of a component. The component is dynamically loaded and rendered as the toast body.

@Component({
  selector: 'custom-component',
  template: `<a target="_blank" href="https://www.google.com">Here is a Toast Body</a>`
})
export class CustomComponent { }
@NgModule({
    bootstrap: [CustomComponent],
    declarations: [CustomComponent]
})
export class CustomComponentModule { }

popComponentToast() {
    var toast: Toast = {
      type: 'info',
      title: 'Here is a Toast Title',
      body: CustomComponent,
      bodyOutputType: BodyOutputType.Component,
      showCloseButton: true 
    };

    this.toasterService.pop(toast);
}

You can see both approaches in this plunker.