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. Image for the cookie policy date

Angular 8 : Cannot read property 'documentEditor' of undefined

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!




5 Replies

SM Suriya Murugan Syncfusion Team July 12, 2019 03:56 AM

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. 



CH Charnsit replied to Suriya Murugan July 12, 2019 05:35 AM

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




SM Suriya Murugan Syncfusion Team July 15, 2019 01:48 AM

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. 



CH Charnsit July 15, 2019 04:18 AM

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


RT Ramya Thirugnanam Syncfusion Team July 15, 2019 10:15 PM

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


Loader.
Live Chat Icon For mobile
Up arrow icon