Simple page binding in Angular 4

Angular 4 Binding

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




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">

Below is optional to bind it to the controller

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

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)]".


  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.