diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6269b86..6e1bfaf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -4,6 +4,8 @@
   <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 cab55a0..fdd0f85 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -26,6 +26,10 @@ 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},
@@ -49,7 +53,9 @@ const appRoutes: Routes = [
     {path: 'demo2', component: Demo2Component}
   ]
   },
-  {path: 'http', component: HttpComponent}
+  {path: 'http', component: HttpComponent},
+  {path: 'pipe', component: PipeComponent},
+  {path: 'event', component: CommunicateBetweenComponentsComponent}
 ];
 
 
@@ -75,7 +81,11 @@ const appRoutes: Routes = [
     AngularServicesComponent,
     Demo1Component,
     Demo2Component,
-    HttpComponent
+    HttpComponent,
+    PipeComponent,
+    FilterPipePipe,
+    CommunicateBetweenComponentsComponent,
+    BankLedgerComponent
   ],
   imports: [
     BrowserModule, FormsModule, RouterModule.forRoot(
@@ -84,7 +94,7 @@ const appRoutes: Routes = [
       // {enableTracing: true} // <-- debugging purposes only
     ), ReactiveFormsModule, HttpClientModule
   ],
-  providers: [ValueStoreService, HttpClient],
+  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/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() {
+  }
+
+}