Angular 8 : Cannot read property 'documentEditor' of undefined

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!

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

Ramya Thirugnanam [Syncfusion]

Replied On July 16, 2019 06:15 AM UTC

Hi Charnist,

Thanks for your update.

Regards,

Ramya T

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US