Angular 2 Bind Html Inputs To Component Variables Like In Vue?

So I've been struggling with this for a long time...I've been looking into the docs, but there are so many different directives and ways to communicate between components and the D

Solution 1:

I think what you're looking for is [(ngModel)] which is used for two-way data binding.

<inputid="customerName"class="form-control" 
  required 
  [(ngModel)]="customer_form.name"
  name="name">

PS: To use the [(ngModel)], you'll have to import FormsModule and then add it the the imports array of your AppModule or whatever module you're using it in.

...
import { FormsModule } from'@angular/forms';
...
@NgModule({
  imports: [ 
    ..., 
    FormsModule, 
    ...
  ],
  ...
})
export classAppModule { }

Solution 2:

I have created a simple example of binding in a template-driven form: https://stackblitz.com/edit/angular-m2tkrf

Note that FormsModule is imported in app.module.ts

import { NgModule }      from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { FormsModule }   from'@angular/forms';         //<---- IMPORTEDimport { AppComponent }  from'./app.component';
import { HeroFormComponent } from'./hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule//<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
exportclassAppModule { }

Solution 3:

Use ngModel for two-way data binding
put [(ngModel)] on the input to pass the data from & to your property like this:


//app.module codeimport { NgModule }      from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { FormsModule }   from'@angular/forms';         //<---- IMPORTEDimport { AppComponent }  from'./app.component';
import { TablesComponent } from'./tables.component';  //<---- IMPORTED@NgModule({
  imports: [
    BrowserModule,
    FormsModule//<---- IMPORTED IN MODULE
  ],
  declarations: [
    AppComponent,
    TablesComponent//<---- IMPORTED
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
exportclassAppModule { }
//--------------------------tables.component.html
    <input id="customerName"class="form-control" [(ngModel)]="customer_form.name" required>