We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular 8 : Cannot read property 'documentEditor' of undefined

Thread ID:

Created:

Updated:

Platform:

Replies:

145896 Jul 12,2019 08:50 AM UTC Jul 16,2019 06:15 AM UTC Angular - EJ 2 5
loading
Tags: DocumentEditor
Charnsit
Asked On July 12, 2019 08:51 AM UTC

I can use the DocumentEditor Control without any issue under Angular 7
But under Angular 8 I got an error which causes the problem to generate the TitleBar with functionalities
to Download or Print documents.

Below are the code and error messages (The code that causes problems are underlined)

export class SyncfusionComponent implements OnInit, AfterViewInit {
public hostUrl: string;
// tslint:disable-next-line:max-line-length
@ViewChild('documenteditor_default', {static: true}) documenteditor_default: ElementRef<DocumentEditorContainerComponent>;
// @ViewChild('documenteditor_default', {read: ElementRef, static: true});
@ViewChild('default_title_bar', {static: true}) default_title_bar: ElementRef<HTMLElement>;
public container: DocumentEditorContainerComponent;
titleBar: TitleBar;

constructor() {
}

ngOnInit() {
this.hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';
// tslint:disable-next-line: no-console
console.log('default_title_bar', this.default_title_bar );
}

ngAfterViewInit() {
// tslint:disable-next-line: no-console
console.log('default_title_bar (ngAfterViewInit)', this.default_title_bar );
// tslint:disable-next-line: no-console
console.log('container', this.container);
// console.log('containerComponent (ngAfterViewInit)', containerComponent );
}

onCreate(): void {
const titleBarElement: HTMLElement = document.getElementById('default_title_bar');
// tslint:disable-next-line: no-console
console.log('titleBarElement : ', titleBarElement);
// tslint:disable-next-line: no-console
console.log('container : ', this.container);
// const titleBarElement: HTMLElement = this.default_title_bar.nativeElement;
// const containerComponent: DocumentEditorContainerComponent = this.container;
const containerComponent = DocumentEditorContainerComponent;
// tslint:disable-next-line: no-console
console.log('containerComponent : ', containerComponent);
this.titleBar = new TitleBar(titleBarElement, this.container.documentEditor, true);
this.container.locale = 'en-US';
this.container.serviceUrl = this.hostUrl + WEB_API_ACTION;
this.container.documentEditor.open(JSON.stringify(defaultDocument));
this.container.documentEditor.documentName = 'Getting Started';
this.titleBar.updateDocumentTitle();
this.container.documentEditor.documentChange = (): void => {
this.titleBar.updateDocumentTitle();
this.container.documentEditor.focusIn();
};
}

}




I was trying to resolve the issue by doing as per this link https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/
but it doesn't help in my case.

Thank you so much for any help!




Suriya Murugan [Syncfusion]
Replied On July 12, 2019 11:56 AM UTC

Hi Charnist, 
  
 Thanks for contacting Syncfusion support. 
  
We have validated your reported issue.  
 
1.     Change your variable initialization code snippet like below: 
 
 
@ViewChild('documenteditor_default', {static: true}) documenteditor_default: ElementRef<DocumentEditorContainerComponent>; 
   public container: DocumentEditorContainerComponent; 
    
    @ViewChild('default_title_bar', {static: true}) default_title_bar: ElementRef<HTMLElement>; 
     titleBar: TitleBar; 
 
 

2.       Then try run the sample 
  
  Please follow the above steps. If you still face the issue , please share the angular app created in your side to validate the issue further.
  
Regards, 
  
Suriya M. 


Charnsit
Replied On July 12, 2019 01:35 PM UTC

Hi Charnist, 
  
 Thanks for contacting Syncfusion support. 
  
We have validated your reported issue.  
 
1.     Change your variable initialization code snippet like below: 
 
 
@ViewChild('documenteditor_default', {static: true}) documenteditor_default: ElementRef<DocumentEditorContainerComponent>; 
   public container: DocumentEditorContainerComponent; 
    
    @ViewChild('default_title_bar', {static: true}) default_title_bar: ElementRef<HTMLElement>; 
     titleBar: TitleBar; 
 
 

2.       Then try run the sample 
  
  Please follow the above steps. If you still face the issue , please share the angular app created in your side to validate the issue further.
  
Regards, 
  
Suriya M. 


Hi Suriya

I've already followed your steps but the issue is still around. Got the same error "Cannot read property 'documentEditor' of undefined"
I'm sharing the code on Github:  https://github.com/Charnsit/ng8-syncfusion
Because of the error, the "Download" and "Print" icon are not displayed on the TitleBar



Thank You & Regards,
Charnsit



Suriya Murugan [Syncfusion]
Replied On July 15, 2019 09:48 AM UTC

Hi Charnist, 
  
We have checked your shared angular app. 
  
In provided sample, variable initialization code is incorrect. 
  
Please change the code like below : 
  
// tslint:disable-next-line:variable-name 
@ViewChild('documenteditor_default', {static: true}) container: ElementRef<DocumentEditorContainerComponent>; 
  
// tslint:disable-next-line: variable-name 
@ViewChild('default_title_bar', {static: true}) titleBar: ElementRef<HTMLElement>; 
 
  
  
Sample running properly without any error. 
  
Regards, 
  
Suriya M. 


Charnsit
Replied On July 15, 2019 12:18 PM UTC

Hi Suriya

Thank you very much for your vigorous support. I'm really appreciated.
Finally, I've managed the code to run properly without error.

Regards,
Charnsit

Ramya Thirugnanam [Syncfusion]
Replied On July 16, 2019 06:15 AM UTC

Hi Charnist,  
 
Thanks for your update. 
 
Regards, 
Ramya T 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon