diff --git a/src/app/app.component.html b/src/app/app.component.html
index 109e680..6e1bfaf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,6 +3,9 @@
   <a routerLink="/directive">Directive</a>
   <a routerLink="/form">Form</a>
   <a routerLink="/angularService">Angular Service</a>
+  <a routerLink="/http">Http</a>
+  <a routerLink="/pipe">Pipe</a>
+  <a routerLink="/event">Event</a>
 </div>
 
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a5cf300..fdd0f85 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,6 +24,12 @@ import {AngularServicesComponent} from './angular-services/angular-services.comp
 import {Demo1Component} from './angular-services/demo1/demo1.component';
 import {Demo2Component} from './angular-services/demo2/demo2.component';
 import {ValueStoreService} from "./angular-services/value-store.service";
+import {HttpComponent} from './http/http.component';
+import {HttpClient, HttpClientModule} from "@angular/common/http";
+import {PipeComponent} from './pipe/pipe.component';
+import {FilterPipePipe} from './pipe/filter-pipe.pipe';
+import { CommunicateBetweenComponentsComponent } from './communicate-between-components/communicate-between-components.component';
+import { BankLedgerComponent } from './communicate-between-components/bank-ledger/bank-ledger.component';
 
 const appRoutes: Routes = [
   {path: 'directive', component: AngularDirectivesComponent},
@@ -47,6 +53,9 @@ const appRoutes: Routes = [
     {path: 'demo2', component: Demo2Component}
   ]
   },
+  {path: 'http', component: HttpComponent},
+  {path: 'pipe', component: PipeComponent},
+  {path: 'event', component: CommunicateBetweenComponentsComponent}
 ];
 
 
@@ -71,16 +80,21 @@ const appRoutes: Routes = [
     Form9Component,
     AngularServicesComponent,
     Demo1Component,
-    Demo2Component
+    Demo2Component,
+    HttpComponent,
+    PipeComponent,
+    FilterPipePipe,
+    CommunicateBetweenComponentsComponent,
+    BankLedgerComponent
   ],
   imports: [
     BrowserModule, FormsModule, RouterModule.forRoot(
       appRoutes
       // ,
       // {enableTracing: true} // <-- debugging purposes only
-    ), ReactiveFormsModule
+    ), ReactiveFormsModule, HttpClientModule
   ],
-  providers: [ValueStoreService],
+  providers: [ValueStoreService, HttpClient, FilterPipePipe],
   bootstrap: [AppComponent]
 })
 export class AppModule {
diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.css b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html
new file mode 100644
index 0000000..49a185c
--- /dev/null
+++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.html
@@ -0,0 +1,11 @@
+<div class="col-md-6">
+  <h2>Fine Customer </h2><br>
+  <input #fine />
+  <br>
+  <button (click)="fineCustomer(fine.value)">Fine</button>
+  <div *ngFor="let leg of ledger">
+    {{leg}}
+  </div>
+  <br>
+  <br>
+</div>
diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts
new file mode 100644
index 0000000..954b6c0
--- /dev/null
+++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BankLedgerComponent } from './bank-ledger.component';
+
+describe('BankLedgerComponent', () => {
+  let component: BankLedgerComponent;
+  let fixture: ComponentFixture<BankLedgerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BankLedgerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BankLedgerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts
new file mode 100644
index 0000000..5a14917
--- /dev/null
+++ b/src/app/communicate-between-components/bank-ledger/bank-ledger.component.ts
@@ -0,0 +1,38 @@
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+
+@Component({
+  selector: 'app-bank-ledger',
+  templateUrl: './bank-ledger.component.html',
+  styleUrls: ['./bank-ledger.component.css']
+})
+export class BankLedgerComponent implements OnInit, OnChanges {
+
+  @Input()
+  deposit;
+
+  @Output()
+  private sms = new EventEmitter<String>();
+
+  ledger = [];
+
+
+  constructor() {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.deposit && !changes.deposit.isFirstChange()) {
+      this.ledger.push('Deposit : ' + this.deposit);
+      this.sms.emit('Deposit Happened : ' + this.deposit);
+    }
+  }
+
+  ngOnInit() {
+  }
+
+  fineCustomer(value: any) {
+    this.ledger.push('Fine : ' + value);
+    this.sms.emit('Bank Charges applied for your account : ' + value);
+  }
+
+
+}
diff --git a/src/app/communicate-between-components/communicate-between-components.component.css b/src/app/communicate-between-components/communicate-between-components.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/communicate-between-components/communicate-between-components.component.html b/src/app/communicate-between-components/communicate-between-components.component.html
new file mode 100644
index 0000000..6b21c0b
--- /dev/null
+++ b/src/app/communicate-between-components/communicate-between-components.component.html
@@ -0,0 +1,18 @@
+<div class="row">
+  <div class="col-md-6">
+    <h3>Welcome to banking System</h3>
+
+    Enter Your Deposit
+    <br>
+    <input #dep />
+    <br>
+    <button (click)="deposit(dep.value)">Deposit</button>
+    <br>
+    <br>
+    SMS came : <br>
+    {{sms}}
+  </div>
+
+  <app-bank-ledger [deposit]="latestDeposit" (sms)="showSMS($event)"></app-bank-ledger>
+
+</div>
diff --git a/src/app/communicate-between-components/communicate-between-components.component.spec.ts b/src/app/communicate-between-components/communicate-between-components.component.spec.ts
new file mode 100644
index 0000000..552916c
--- /dev/null
+++ b/src/app/communicate-between-components/communicate-between-components.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CommunicateBetweenComponentsComponent } from './communicate-between-components.component';
+
+describe('CommunicateBetweenComponentsComponent', () => {
+  let component: CommunicateBetweenComponentsComponent;
+  let fixture: ComponentFixture<CommunicateBetweenComponentsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunicateBetweenComponentsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommunicateBetweenComponentsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/communicate-between-components/communicate-between-components.component.ts b/src/app/communicate-between-components/communicate-between-components.component.ts
new file mode 100644
index 0000000..d97b140
--- /dev/null
+++ b/src/app/communicate-between-components/communicate-between-components.component.ts
@@ -0,0 +1,31 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-communicate-between-components',
+  templateUrl: './communicate-between-components.component.html',
+  styleUrls: ['./communicate-between-components.component.css']
+})
+export class CommunicateBetweenComponentsComponent implements OnInit {
+  value = 0;
+  latestDeposit: Number;
+  sms;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  deposit(value: any) {
+    this.latestDeposit = value;
+  }
+
+  getDeposit() {
+    return this.latestDeposit;
+  }
+
+  showSMS(event) {
+    this.sms = event;
+  }
+
+}
diff --git a/src/app/http/http.component.css b/src/app/http/http.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/http/http.component.html b/src/app/http/http.component.html
new file mode 100644
index 0000000..0cd4c3a
--- /dev/null
+++ b/src/app/http/http.component.html
@@ -0,0 +1,4 @@
+<button (click)="requestGet()">Get Request</button>
+<button (click)="requestPost()">Post Request</button>
+<br>
+{{object |json}}
diff --git a/src/app/http/http.component.spec.ts b/src/app/http/http.component.spec.ts
new file mode 100644
index 0000000..bbb6d5c
--- /dev/null
+++ b/src/app/http/http.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HttpComponent } from './http.component';
+
+describe('HttpComponent', () => {
+  let component: HttpComponent;
+  let fixture: ComponentFixture<HttpComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HttpComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HttpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/http/http.component.ts b/src/app/http/http.component.ts
new file mode 100644
index 0000000..189efba
--- /dev/null
+++ b/src/app/http/http.component.ts
@@ -0,0 +1,56 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import "rxjs/add/operator/takeWhile";
+import {Subscription} from "rxjs/Subscription";
+
+@Component({
+  selector: 'app-http',
+  templateUrl: './http.component.html',
+  styleUrls: ['./http.component.css']
+})
+export class HttpComponent implements OnInit, OnDestroy {
+
+  object: any;
+  alive = true;
+  subscription: Subscription;
+
+  constructor(private httpClient: HttpClient) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnDestroy(): void {
+    this.alive = false;
+    if (this.subscription) {
+      this.subscription.unsubscribe();
+    }
+  }
+
+  requestGet() {
+    this.httpClient.get('http://httpbin.org/headers').subscribe(data => {
+      // Read the result field from the JSON response.
+      this.object = data['headers'];
+    });
+  }
+
+  requestPost() {
+    this.httpClient.post('http://httpbin.org/post', {}).takeWhile(() => this.alive).subscribe(data => {
+      // Read the result field from the JSON response.
+      this.object = data['headers'];
+    });
+  }
+
+  requestGetUnsubscribeWay() {
+    this.subscription = this.httpClient.get('http://httpbin.org/headers').subscribe(data => {
+      // Read the result field from the JSON response.
+      this.object = data['headers'];
+    });
+    // const sub = this.httpClient.get('http://httpbin.org/headers').subscribe(data => {
+    //   // Read the result field from the JSON response.
+    //   this.object = data['headers'];
+    // });
+    // this.subscription.add(sub);
+  }
+
+}
diff --git a/src/app/pipe/filter-pipe.pipe.spec.ts b/src/app/pipe/filter-pipe.pipe.spec.ts
new file mode 100644
index 0000000..610fd02
--- /dev/null
+++ b/src/app/pipe/filter-pipe.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { FilterPipePipe } from './filter-pipe.pipe';
+
+describe('FilterPipePipe', () => {
+  it('create an instance', () => {
+    const pipe = new FilterPipePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/pipe/filter-pipe.pipe.ts b/src/app/pipe/filter-pipe.pipe.ts
new file mode 100644
index 0000000..f005434
--- /dev/null
+++ b/src/app/pipe/filter-pipe.pipe.ts
@@ -0,0 +1,16 @@
+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+  name: 'filterPipe'
+})
+export class FilterPipePipe implements PipeTransform {
+
+  transform(items: any, name: any): any {
+    if (name) {
+      items = items.filter(
+        item => item.name.toUpperCase().startsWith(name.toUpperCase()));
+    }
+    return items;
+  }
+
+}
diff --git a/src/app/pipe/pipe.component.css b/src/app/pipe/pipe.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pipe/pipe.component.html b/src/app/pipe/pipe.component.html
new file mode 100644
index 0000000..a0ac159
--- /dev/null
+++ b/src/app/pipe/pipe.component.html
@@ -0,0 +1,23 @@
+Without Pipe
+<br>
+{{data}}
+<br>
+<br>
+With Pipe
+<br>
+{{data|json }}
+<br>
+<br>
+For loop without filtering of pipes
+<div *ngFor="let person of people">
+  {{person|json}}
+</div>
+<br>
+<br>
+For loop With Custom Pipe
+<input [(ngModel)]="name"/>
+<br>
+<br>
+<div *ngFor="let person of people|filterPipe:name">
+  {{person|json}}
+</div>
diff --git a/src/app/pipe/pipe.component.spec.ts b/src/app/pipe/pipe.component.spec.ts
new file mode 100644
index 0000000..ba50ead
--- /dev/null
+++ b/src/app/pipe/pipe.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PipeComponent } from './pipe.component';
+
+describe('PipeComponent', () => {
+  let component: PipeComponent;
+  let fixture: ComponentFixture<PipeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PipeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PipeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pipe/pipe.component.ts b/src/app/pipe/pipe.component.ts
new file mode 100644
index 0000000..a28f45f
--- /dev/null
+++ b/src/app/pipe/pipe.component.ts
@@ -0,0 +1,22 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-pipe',
+  templateUrl: './pipe.component.html',
+  styleUrls: ['./pipe.component.css']
+})
+export class PipeComponent implements OnInit {
+  data = {name: 'Kamal', city: 'Moratuwa'};
+
+  people = [{name: 'Nimal', city: 'Colombo'}, {name: 'Kammaliya', city: 'Nugegoda'}, {name: 'Sunil', city: 'Kandy'},
+    {name: 'Nirmal', city: 'Ambalangoda'}];
+
+  name;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}