Get element by id - Angular2

Question

I have a code:

document.getElementById('loginInput').value = '123';

But while compiling the code I receive following error:

Property value does not exist on type HTMLElement.

I have declared a var: value: string;.

How can I avoid this error?

Thank you.

Seems you do want a component by id, not an element by id. That's not supported though. — Günter Zöchbauer, Jan 11 '17 at 10:48
if you are using angular 2 you can use its data binding feature [here](https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax) — Suraj Rao, Jan 11 '17 at 11:06
you are trying to set the value of text-filed or want to get value from text-filed ? what you are trying to achive ? — Pardeep Jain, Jan 11 '17 at 11:07
@PardeepJain I want to set the value of login and password inputs, so I don't need to write it by myself every time I log into the application. — Natalia, Jan 11 '17 at 11:12
Don't do that, just follow the angular.io tutorial on bindings... There are plenty of examples there — Alex Beugnet, Jan 11 '17 at 11:30

score 37 · Answer 1 · edited Jun 20 '20 at 09:12

37

if you want to set value than you can do the same in some function on click or on some event fire.

also you can get value using ViewChild using local variable like this

<input type='text' id='loginInput' #abc/>

and get value like this

this.abc.nativeElement.value

here is working example

Update

okay got it , you have to use ngAfterViewInit method of angualr2 for the same like this

ngAfterViewInit(){
    document.getElementById('loginInput').value = '123344565';
  }

ngAfterViewInit will not throw any error because it will render after template loading

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 11 '17 at 11:15

Pardeep Jain

84,110
37
165
215

interesting. Is this true in angular 6? – Gel Oct 20 '18 at 03:57
Yes. It is true for Angular 6 as well. – Soumya Kanti Oct 21 '18 at 18:41
1

Is this the preferred way in Angular? It works in Angular 7 as well but I'm not sure if this is the Angular way to do this. – skydev Nov 06 '18 at 11:14
obviously not @skydev, But as per question requirements I answered this – Pardeep Jain Nov 09 '18 at 06:34

Gopherine · Answer 2 · 2019-11-29T14:43:52.080

(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angular cannot take HTML elements directly thereby you need to specify the element type by binding the above generic to it.

UPDATE::

This can also be done using ViewChild with #localvariable as shown here, as mentioned in here

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} 

</textarea>

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way
}

AT82 · Answer 3 · 2018-02-13T11:11:45.293

8

A different approach, i.e: You could just do it 'the Angular way' and use ngModel and skip document.getElementById('loginInput').value = '123'; altogether. Instead:

<input type="text" [(ngModel)]="username"/>
<input type="text" [(ngModel)]="password"/>

and in your component you give these values:

username: 'whatever'
password: 'whatever'

this will preset the username and password upon navigating to page.

edited Feb 13 '18 at 11:11

answered Jan 11 '17 at 11:16

AT82

71,416
24
140
167

1

What if I have to pass the value from the external javascript file to the angular component form field? This is what I did, I have an algorithm sit in the javascript file when the algorithm finished generating the value, and it passes back to the angular form by using this code, getDocumentById('input').value = someValue; . But, when I try to retrieve the value in the event of OnSubmit() I got the undefined value. Any idea? – DavidB Feb 18 '18 at 15:45

score 4 · Answer 4 · answered Jun 12 '19 at 12:17

Complate Angular Way ( Set/Get value by Id ):

// In Html tag

 <button (click) ="setValue()">Set Value</button>
 <input type="text"  #userNameId />

// In component .ts File

    export class testUserClass {
       @ViewChild('userNameId') userNameId: ElementRef;

      ngAfterViewInit(){
         console.log(this.userNameId.nativeElement.value );
       }

      setValue(){
        this.userNameId.nativeElement.value = "Sample user Name";
      }



   }

Get element by id - Angular2

4 Answers4

Update

Linked

Related