In angular in order to accept user input we need to use two-way data binding, between the HTML and Component. We use [(ngModel)] to bind a value from the <input>. This is useful for login page, register pages, search bars and other forms that require user specific input.
Our component
my-component.ts
Import { Component } from "@angular/core"; (
@Component({
selector: "my-component",
templateURL: './my.component.html'.
styles: [['h1 { font-weight: normal; }']]
})
export class MyComponent {
name = ""
}
Line 10: the name property the above component is going to store the value from the user <input>, however right now it is just an empty string.
Out template for the component
my.component.html
<input [(ngModel]="name" >
Notice the name in quotes, that is referring to the name on the component in my.component.html. This is how you receive information from the user with angular's two way data binding.
