Hi I am trying to set value to a angular input box but when i do

let input = document.getElementById('mat-input-0');
input.value = "Something"

input box value changes on website but angular does not see any value when I try hit button and set form

Hi I am trying to set value to a angular input box but when i do

let input = document.getElementById('mat-input-0');
input.value = "Something"

input box value changes on website but angular does not see any value when I try hit button and set form

• javascript
• angular

Share Improve this question Follow edited Feb 16, 2021 at 14:12 Deitsch 2,2282121 silver badges3535 bronze badges asked Jun 5, 2019 at 10:10 Petr MPetr M 16333 gold badges33 silver badges1313 bronze badges 7

• 2 Because this isn't Angular, this is JS. Before using a framework, take some time, and RTFM ! – user4676340 Commented Jun 5, 2019 at 10:13
• That's not how you should approach things. Read the documentation. You'll want to use a model, and change the value of the model. angular.io/api/forms/NgModel – Tim VN Commented Jun 5, 2019 at 10:14
• It is not my project and I never used Angular before and I need to add some new features and I could not find answer to my question anywhere :( – Petr M Commented Jun 5, 2019 at 10:20
• The angular doc is a good place to start. If you need to work on a techno that you don't know it should be your first move. – JEY Commented Jun 5, 2019 at 10:28
• Yes you are right I just didn't want to read docs because it was minor change so I thought I will handle It without docs – Petr M Commented Jun 5, 2019 at 10:31

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 1

You can bind to the input value property:

<input [value]="value">

or get the element in your TS file using @ViewChild:

html:

TS:

@ViewChild('input', { static: false }) input: ElementRef;

  AfterViewInit() {
    // Change the value here
  }