Angular 8 : Cannot read property 'documentEditor' of undefined

[Charnsit]

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]

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]

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]

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]

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]

Hi Charnist,  

 

Thanks for your update. 

 

Regards, 

Ramya T