Address Book - Part 1

We will go forward with the previous project structure, and build a simple address book.

Note: We can have our npm server running throughout our development (using npm start), any code changes will be reflected immediately.

Creating the address book will be a step by step procedure.

Let us start by displaying the name and the phone number of the contact. Let us provide the provision to edit the number of the contact.

Our final product, at the end of this post, will be:

Any changes in the text box should immediately be reflected in the text below.

Lets get started.

Make the following changes in app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Address Book</h1>

<label>Name:</label> {{name}}
<br>
<label>Contact :</label> <input [(ngModel)]="contact">
<br>
{{name}} , {{contact}}`
})
export class AppComponent { 


  name = "ABC";
  
  contact = 123456789;
 
}

Here we are using the ngModel selector.
You can have a one way binding with the [] and a two way binding with [()] in ngModel.
Using {{}} is the easiest way to display data using interpolation.

Our browser will give the following error!!!!

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'.

Since we have used ngModel we will have to import the FormsModule in our application. This will be done in app.module.ts

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

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

Save both the files and check the browser to see it work as required.

Useful link: Angular Index