To get a brief idea of data flow, let's make a comparative study of how MVC is implemented in Angular. Consider the following diagram:

The diagram consists of basic blocks in Angular 2.0, and not all the facets. The model consists of static data or synchronous data classes, which are extended or imported in components. The components act as controllers that contain business logic. Each component has metadata, which connects it with templates. Finally, the data is bound to the component class variables and is available in templates. Now, for our application, we need the contact data list to be displayed; hence, we will be using this feature of data bindings in our new component file list.component.ts. This file provides the logic for listing the contacts in the phonebook. Always follow the three step procedure to include a component.

1. Create a metadata and a class for the list component with its template. So, we have list.component.ts, which consists of the following code :

import { Component } from '@Angular/core';
@Component({
    selector: 'list',
    templateUrl: './list.component.html'
})
export class ListComponent {
    public phoneList = []
    constructor() {
        this.phoneList = [{
            name: 'Superman',
            phno: 1234567890
        }, {
            name: 'Batman',
            phno: 2222222890
        }]
    }
} 

 It also consists of its template, list.component.html:

<div>
    <div class="list-group">
        <div class="list-group-item list-group-item-info">
            Contact list
        </div>
        <a href="#" *ngFor="let data of phoneList;" class="list-group-item">
 {{data.name}}
 <span class="badge">{{data.phone_no}}</span>
 </a>
   </div>
<div>

2. Include the component in app.module and register it within the declaration property, as follows:

import { ListComponent } from './list.component';
@NgModule({
    declarations: [
        AppComponent,
        ListComponent
    ],
    imports: [
        BrowserModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})

3. This third step is to include the template for rendering the component. We already have our root component root-app. So, uncomment the list tag from app.component.htm. This can be done as follows :

<div class="outter">
<!-- <subscribe></subscribe>-->
    <list>&lt;/list>
</div>