Host not defined at LifeCycle hook ngAfterViewInit

[a2m developerParticipant]

Using ViewChild references for components in the NgAfterViewInit Life Cycle Hook but keep coming up with “Cannot read property ‘jqxTextArea’ of undefined” error:

`ViewChild(‘textAreaReference’) textAreaReference: jqxTextAreaComponent;
…
ngAfterViewInit() {
this.textAreaReference.val(this.value);
} `

error_handler.ts:1 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'jqxTextArea' of undefined
TypeError: Cannot read property 'jqxTextArea' of undefined
    at jqxTextAreaComponent.val (http://127.0.0.1:4200/vendor.bundle.js:45541:22)
    at HdFormFieldComponent.webpackJsonp.213.HdFormFieldComponent.ngAfterViewInit (http://127.0.0.1:4200/main.bundle.js:1487:36)
    at callProviderLifecycles (http://127.0.0.1:4200/vendor.bundle.js:11678:18)
	...

Where this.host is undefined.

jqxTextAreaComponent.prototype.val = function (value) {
        if (value !== undefined) {
            this.host.jqxTextArea("val", value);
        }
        else {
            return this.host.jqxTextArea("val");
        }
    };

Why is the host not defined? This is happening other places as well.

[a2m developerParticipant]

Huh.. turns out there is a pretty important concept to understand:
Angular’s unidirectional data flow rule forbids updates to the view after it has been composed, and anytime you don’t use enableProdMode() the app will complain about your changes. This basically means that you are not allowed to modify component binding data within any of lifecycle hooks. If you wish to do so then wrap the changes in a promise via Promise.resolve(() => { changes… }). Source – good article to read

[Author]

Posts