src/app/app.component.html

 <h1>
   Welcome to {{title}}!
 </h1>
+
+<h2>Contacts</h2>
+<ul>
+  <li
+    *ngFor="let contact of contacts"
+    (click)="selectContact(contact)"
+    [class.selected]="isSelected(contact)">
+    {{contact.name}}
+  </li>
+</ul>
+
+<div *ngIf="selectedContact">
+  <h2>{{selectedContact.name}}</h2>
+  <input
+  type="text"
+  [(ngModel)]="selectedContact.name">
+</div>
+
+<h2>New Contact</h2>
+<form (submit)="addContact()">
+  <input
+    type="text"
+    name="name"
+    [(ngModel)]="contactName">
+  <button type="submit">
+    Add contact {{contactName}}
+  </button>
+</form>

src/app/app.component.scss

 h1 {
   color: blueviolet;
 }
+
+li {
+  cursor: pointer;
+}
+
+li.selected {
+  background-color: lightblue;
+}

src/app/app.component.ts

@@ -6,5 +6,28 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  selectedContact: { name: string };
+
   title = 'Angular on Fire Chat';
+
+  contactName = '';
+
+  contacts = [
+    { name: 'Rob' },
+    { name: 'Ed' },
+    { name: 'Jon' }
+  ];
+
+  addContact() {
+    this.contacts.push({ name: this.contactName });
+    this.contactName = '';
+  }
+
+  selectContact(contact) {
+    this.selectedContact = contact;
+  }
+
+  isSelected(contact): boolean {
+    return this.selectedContact == contact;
+  }
 }

src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms'
 
 import { AppComponent } from './app.component';
 
@@ -8,7 +9,8 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]