Want to show custom components on Toast

[Michael Mairegger]

Following this tutorial Toast · Template · Essential JS 2 for Angular · Syncfusion for rendering custom template I wanted to render a custom template e.g. <app-file-downloader>

I tried as template:

private template: string = '<div class="e-toast-template"><app-file-downloader></app-file-downloader></div>';

but unfortunately this will not work. What I want to achieve is to render the app-file-downloader inside the template.

is this possible?​

[Buvana Sathasivam]

Hi Michael,

Greetings from Syncfusion support.

Yes. It is possible to render other components using selector as HTML tag inside the Toast component in the below way. In below sample, we have created a ChildComponent and referred <app-child> HTML tag into the Toast component <ng-template #content></ng-template>. Please find the below code and sample for your reference.

child.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

 

@Component({

  selector: 'app-child',

  templateUrl: './child.component.html',

})

export class ChildComponent implements OnInit {

  constructor() {}

  ngOnInit(): void {}

}

child.component.html

<div>Conference Room 01 / Building 135 10:00 AM-10:30 AM</div>

app.component.html

 <ejs-toast>

      <ng-template #content>

        <div>

          <app-child></app-child>

        </div>

      </ng-template>

    </ejs-toast>

Sample: https://stackblitz.com/edit/angular-gcmggi?file=child.component.ts,child.component.html,app%2Fapp.module.ts,app.component.html,app.component.ts

Regards,

Buvana S

[Michael Mairegger]

Hello Buvana,

yes, I know about this feature, but I need dynamic content with a template like where myFile will be different for every toast

private template: string = '<div class="e-toast-template" [file]="myfile"><app-file-downloader></app-file-downloader></div>';

Reagrds,
Michael

[Buvana Sathasivam]

Hi Michael,

You should be able to achieve your requirement by using toast as an angular service. In the below sample, we have rendered toast components with different content dynamically using ngTemplatOutlet. It creates a ViewContainer from the DOM element and inserts an embedded view produced by a template. Please find the below code and sample for your reference.

catalog.component.ts

@Component({

  selector: 'home',

  template: `

……..

  <div id="ToastContainer" style="display:none">

    <ng-container [ngTemplateOutlet]="taskLoaderTemplate"></ng-container>

  </div>

  <ng-template #taskLoaderTemplate><div><catalog-content></catalog-content></div></ng-template>

  `,

})

 

export class CatalogViewComponent {

……

  showBtnClick(e) {

    this.toastService.showToast(this.toast1.nativeElement, {

      title: 'Toast Sample Header',

      content: document.getElementById('ToastContainer').innerHTML,

    });

  }

}

 

Sample: https://stackblitz.com/edit/angular-router-basic-example-mzk6y2?file=app%2Fapp.routing.module.ts

You can also refer to the below knowledge base link for creating toast as an angular service.

https://www.syncfusion.com/kb/13307/how-to-use-toast-as-an-angular-service

Can you please check the above shared sample and let us know if it meets your requirements?

Regards,

Buvana S