Simple page binding in Angular 4

Angular 4 Binding

In this tutorial i will show you how to make a simple Angular 4 binding.

 

binding-ngModel

 

After creating your Angular 4 / Angular 2 project , you will have the folders/files structure, simply add the following in each file for binding.

app.component.html , notice how below the [(ngModel)] directive is used.

<input type="text" [(ngModel)]="pageTitle">
{{pageTitle}}

Below is optional to bind it to the controller
app.component.ts

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pageTitle = "";
}

 

 

The only important part in the above that you declared the pageTitle in script which is used inside the html.

The directive used is "[(ngModel)]".

ngModel

  1. -- directive in module ng
    The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.