Angular access html content via .ts file

Question

I want to get access input field [newUser] value in button click action [onAddUser()] in .ts file.

<input type="text" 
        ng-model="newUser"
        style="text-align:center"/>
<button (click)="onAddUser()" >Add User</button>

The code is mixing AngularJS directives with Angular 2+ directives. ng-model is an AngularJS directive. — georgeawg
– georgeawg, Commented Jun 24, 2018 at 16:15

gagan · Accepted Answer · 2018-06-24 16:15:48Z

3

If you are using Angular (not AngularJS 1.x) then you need to change the NgModel syntax:

In HTML (template):

<input type="text" 
         [(ngModel)]="newUser"
         style="text-align:center"/>
<button (click)="onAddUser()" >Add User</button>

In TS file:

export class YourComponent {
  newUser: string;

  onAddUser(){
    alert(this.newUser); //get the input value
  }
}

Also, remember to import the FormsModule:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  bootstrap: [AppComponent],
  declarations: [AppComponent],
  imports: [
    CoreModule,
    FormsModule
  ],
})
export class AppModule {}

answered Jun 24, 2018 at 16:15

gagan

2691 silver badge4 bronze badges

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

Collectives™ on Stack Overflow

Angular access html content via .ts file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related