Toast - Cannot read properties of undefined (reading 'nativeElement')
Hello Syncfusion Team,
I am using the syncfusion toast in my angular project and sometimes when I want to show the toast following error appears:
It is embeded in the app.component like this:
<app-toast></app-toast>
<router-outlet></router-outlet>
<p class="version" [innerHTML]="config.version$ | async"></p>
The html of app-toast looks like this:
<ejs-toast #toastView (created)="onToastCreated($event)" [position]="position" [showCloseButton]="true">
</ejs-toast>
The typescript of app-toast looks like this:
import { Component, ViewChild } from '@angular/core';
import { ToastComponent } from '@syncfusion/ej2-angular-notifications';
import { ToastService } from 'src/app/core/services/toast.service';
@Component({
selector: 'app-toast',
templateUrl: './toast.popup.component.html',
styleUrls: ['./toast.popup.component.scss']
})
export class ToastPopupComponent {
@ViewChild('toastView', { static: true })
private toastView: ToastComponent;
public position = { X: 'Center', Y: 'Top' };
public toastContent: string = '';
public toasts: { [key: string]: Object }[] = [
{ title: '', content: '', cssClass: 'e-toast-success', icon: 'e-success toast-icons' },
{ title: '', content: '', cssClass: 'e-toast-danger', icon: 'e-error toast-icons' },
{ title: '', content: '', cssClass: 'e-toast-info', icon: 'e-info toast-icons' }
];
constructor(
public toast: ToastService
) { }
onToastCreated(test: any) {
this.toast.currentMessage$.subscribe(
value => {
if (value != null) {
this.toastContent = value.message;
switch (value.alertType) {
case 'success':
this.toasts[0].title = value.title;
this.toasts[0].content = value.message;
this.toastView.show(this.toasts[0]);
break;
case 'error':
this.toasts[1].title = value.title;
this.toasts[1].content = value.message;
this.toastView.show(this.toasts[1]);
break;
case 'info':
this.toasts[2].title = value.title;
this.toasts[2].content = value.message;
this.toastView.show(this.toasts[2]);
break;
}
}
else {
this.toastView.hide();
}
})
}
}
I am using a service to show the toast (to change the behavior subject currentMessage$) which looks like this:
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";
import { map } from "rxjs/operators";
@Injectable()
export class ToastService {
// Null if alert is closed
currentMessage$ = new BehaviorSubject<AlertMessage | null>(null);
// If Alert is currently open
isOpen = this.currentMessage$.pipe(map(m => Boolean(m)));
constructor() {
}
//Alerttypes: error, info, success
show(title: string, message: string, alertType: string) {
this.currentMessage$.next({ message, title, alertType });
}
close() {
this.currentMessage$.next(null);
}
}
export interface AlertMessage {
title: string;
message: string;
alertType: string;
}
Do you have an idea why the error appears?
Kind Regards, Peter Linecker
SIGN IN To post a reply.
1 Reply
SIGN IN To post a reply.
