How to save text from input to variable in angular?

Question

I'm trying to take text from one of my component.html files and save the input to a variable in a method in one of my .ts files. Can you help?

home.component.html file:

Username: <input ng-model="username"><br>
Password: <input ng-model="pass">  
<button (click)="login()">Login</button>

home.component.ts file:

export class HomeComponent implements OnInit {

    login()
    {
     const usr= {{username}};
     const password={{pass}};
     print("user is"+usr " Password is"+password);

    }

}

Sajeetharan · Accepted Answer · 2018-04-29 03:45:31Z

1

If you are using angular it should be

ngModel instead of ng-model

Username: <input  [(ngModel)]="username"><br>
Password: <input  [(ngModel)]="pass">

and in component.ts

export class HomeComponent implements OnInit {
    username : string;
    password : string;

    login()
    {
     const usr= this.username;
     const password= this.password;
     console.log("user is"+usr " Password is"+password);
    }

}

answered Apr 29, 2018 at 3:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Chris Dunn Over a year ago

Thanks. how do I return the values of "usr" and "password" back to the html instead of writing to console?

Sajeetharan Over a year ago

why do you want to retun? its already there in HTML. you can use it as {{user}} {{password}}

Chris Dunn Over a year ago

I'm actually returning different text, I just want to understand how to

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

you need to change ng-model to ngModel

ng-model :- angularjs

ngModel :- Angular 2 or greater

Html

Username: <input [(ngModel)]="username"><br>
Password: <input [(ngModel)]="pass">  
<button (click)="login()">Login</button>

Component

export class HomeComponent implements OnInit {
 public username: String;
 public pass: String;
 public function login() {
 console.log('User Name: ' + this.username);
 console.log('Password: ' + this.pass);
 }
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 29, 2018 at 5:09

Sharma Vikram

2,4846 gold badges26 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to save text from input to variable in angular?

home.component.html file:

home.component.ts file:

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

home.component.html file:

home.component.ts file:

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related