How do i get the value of an HTML element in Angular 2?

Question

How do i get the value of an html input element in my component class?

For example, i want to get the username from this input element in my component class.

<div class="row">
     <div class="input-field col s12">                  
          <input id="username" type="text" class="validate" name="username">
          <label for="username">Username</label>
    </div>
</div>

Then i need the value in my component class:

export class HomepageComponent {
     username = username;
}

angular.io/docs/ts/latest/guide/template-syntax.html How about using ngModel? :) — AVJT82
– AVJT82, Commented Apr 23, 2017 at 14:21
Yes, i have been researching about ngModel, but i couldn't wrap my head around the appropriate binding to use. @ajt-82 — proton
– proton, Commented Apr 23, 2017 at 14:23
I'd suggest you actually take a look at the tutorial. You got an answer, yes, but if you look at the tutorial you'd get the hang of the basics. Start here: angular.io/docs/ts/latest/tutorial/toh-pt1.html :) — AVJT82
– AVJT82, Commented Apr 23, 2017 at 14:28

Pankaj Parkar · Accepted Answer · 2017-04-23 14:23:47Z

4

You could use ngModel directive there (two way binding) or template variable which will help you to hold DOM.

<input id="username" type="text" class="validate" [(ngModel)]="userName" name="username">

OR

<input #usernameInput type="text" class="validate" 
   name="username" (input)="username = usernameInput.value">

answered Apr 23, 2017 at 14:23

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

proton Over a year ago

so i did this earlier but my problem is how to access that variable in the component class.

Pankaj Parkar Over a year ago

You could use this.username in component class?

Collectives™ on Stack Overflow

How do i get the value of an HTML element in Angular 2?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related