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

User · Answer

lt HTMLInputElement gt 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   lt textarea   someVar  id  tasknote                    name  tasknote                      ngModel    taskNote                    placeholder     notePlaceholder                       style  background-color  pink                     blur   updateNote     noteEditMode   false    click   noteEditMode   false  gt     todo note       lt  textarea gt      import  ElementRef Renderer2  from   angular core    ViewChild  someVar   el ElementRef   constructor private rd  Renderer2      ngAfterViewInit           console log this rd          this el nativeElement focus            lt  lt  lt      same as oldest way

User · Answer

Complate Angular Way   Set Get value by Id        In Html tag    lt button  click    setValue    gt Set Value lt  button gt    lt input type  text    userNameId   gt       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

User · Answer

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     lt input type  text    ngModel    username   gt   lt input type  text    ngModel    password   gt    and in your component you give these values   username   whatever  password   whatever    this will preset the username and password upon navigating to page

User · Answer

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  lt input type  text  id  loginInput   abc  gt   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

[javascript] Get element by id - Angular2

Examples related to javascript

Examples related to angular

Examples related to typescript