Angular 2 can't change input value at ngOnInit()

Question

I need to change the value of an input when the page loads. However, I am not being able to. This is how I created the input on a separate html file.

<form (submit)="some_function()">
<input (keypress)="some_function()" name="test" id="test-input" [(ngModel)]="test" [placeholder]="'NEED TO CHANGE INPUT TEXT' | translate"/>
<button type="submit">Submit </button>

Then in a ts file I have something like this:

ngOnInit() {

    var element = document.getElementById("test-input");
    // If I console.log(element) I actually get it.

    element.textContent = "INPUT TEXT CHANGED??";
    // If I console.log(element.textContent) I get the input with changed text... but I can't see it otherwise

}

What am I doing wrong here? Any help?

Answer 1

@Input variables are not passed to a controller until the view is fully initialized (that's a different hook from the ngOnInit). First, import the proper hook:

import { AfterViewInit } from "@angular/core";

then declare that you are implementing the AfterViewInit hook:

class YourController implements AfterViewInit

and finally declare the method related to the hook:

ngAfterViewInit() {
    var element = document.getElementById("test-input");
    // If I console.log(element) I actually get it.

    element.textContent = "INPUT TEXT CHANGED??";
    // If I console.log(element.textContent) I get the input with changed text... but I can't see it otherwise
}

Should do the trick (: