Updated the sample

Author: VenkateshwaranSaravanakumar

src/app/app.component.html

@@ -1,8 +1,8 @@
 <div class="container">
-<button ejs-button (click)="showClick($event)">Show Toast</button>
-<button ejs-button (click)="hideClick($event)">Hide Toast</button>
+  <button ejs-button (click)="showToast($event)">Show Toast</button>
+  <button ejs-button (click)="hideToast($event)">Hide Toast</button>
 </div>
-<ejs-toast #toastObj [position]='position' [timeOut]='5000' [showCloseButton]="true" >
+<ejs-toast #toastObj [position]='position' [timeOut]='500' [showCloseButton]="false">
   <!-- <ng-template #title>
     <div>Matt sent you a friend request</div>
   </ng-template>
@@ -13,17 +13,17 @@
   <ng-template #template>
     <div id='template_toast'>
       <div className="horizontal-align">
-        <div className='toast-content'>
-          <div className='toast-title'>
+        <div className='toast-content' style="padding-bottom: 5px;">
+          <div className='toast-title' style="font-weight: bold; padding-bottom: 5px;">
             Weekend Alarm
           </div>
-          <div className='toast-message'>
-            With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
-            Olive Way by 10:00PM
+          <div className='toast-message' style="padding-bottom: 5px;">
+            With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday
+            Bash at Hillside Bar, 454 E.Olive Way by 10:00PM
           </div>
         </div>
       </div>
       <img src='https://ej2.syncfusion.com/demos/src/toast/resource/map.jpg' />
     </div>
   </ng-template>
-</ejs-toast>
+</ejs-toast>

src/app/app.component.ts

@@ -1,30 +1,25 @@
 import { Component, ViewChild } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { ToastModule } from '@syncfusion/ej2-angular-notifications'
+import { ToastModule, ToastComponent } from '@syncfusion/ej2-angular-notifications'
 import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet,ToastModule, ButtonModule ],
+  imports: [RouterOutlet, ToastModule, ButtonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
-  @ViewChild('toastObj') public toastObj: any;
-  public position = { X: 'Right', Y: 'Top' };
+  @ViewChild('toastObj') public toastObj: ToastComponent;
 
-  onCreate(args: any) {
-    this.toastObj.show();
-  }
+  public position = { X: 'Right', Y: 'Top' };
 
-  showClick(args: any) {
+  showToast(args: any) {
     this.toastObj.show();
   }
 
-  hideClick(args: any) {
+  hideToast(args: any) {
     this.toastObj.hide('All');
   }
-
-  
 }

src/styles.css

@@ -4,14 +4,18 @@
 @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
 @import '../node_modules/@syncfusion/ej2-angular-notifications/styles/material.css';
 
-.container
-{
-    margin:50px auto 0; 
-    width:500px; 
-    height:700px;
+.container {
+  margin: 50px 600px 0;
+  width: 500px;
+  height: 700px;
+}
+
+button.e-control.e-btn.e-lib {
+  margin: 10px
 }
 
 img {
+  padding-bottom: 15px;
   width: 100%;
   height: 70%;
 }