Angular - Setting value in input text box in another component

Question

I am trying to set the value in an HTML input text box which is a part of ComponentA from the typescript code which is a part of ComponentB.

Taking a clue from this SO i tried doing:

(<HTMLInputElement>document.getElementById("name")).value = response.name;

But this is not working. Is there anything else i need to take care of?

EDIT: The element with Id "name" is in ComponentA and the above code that is trying to manipulate that element is in ComponentB

Answer 1

If you are trying to set the value of component1's textfield from the compoenent2 then you must have to use of ngModel i.e two way data binding. by providing component2 in the providers list you are able to access all the functions and variables of that component, then you can easily set your value. like this

suppose this is your component 2's value property

name:string = 'Pardeep Jain';

than you can access this in component like this-

<input type="text" [(ngModel)]='name'>
....
constructor(private delete1: Delete){
   this.name = this.delete1.name;
}

Working Example

Also

(<HTMLInputElement>document.getElementById("name")).value = response.name;

is used to set the value of current template's field with id named as **name**