diff --git a/src/app/app.component.html b/src/app/app.component.html
index 75a2411..05ee3d7 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,3 @@
-<p appOverHighlight>當游標移到這裡，會改變文字顏色</p>
-<p class="overing">這裡套上了就不會改變顏色</p>
+<div>Upper Case: {{ 'angular' | uppercase }}</div>
+<div>lower Case: {{ 'angular' | lowercase }}</div>
+<div>Title Case: {{ 'angular' | titlecase }}</div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2b41a28..93c6719 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,11 +3,10 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
-import { OverHighlightDirective } from './over-highlight.directive';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent, OverHighlightDirective ],
+  declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }
diff --git a/src/app/over-highlight.directive.ts b/src/app/over-highlight.directive.ts
deleted file mode 100644
index d80e3f4..0000000
--- a/src/app/over-highlight.directive.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Directive, HostBinding, HostListener } from '@angular/core';
-
-@Directive({
-  selector: '[appOverHighlight]',
-})
-export class OverHighlightDirective {
-  @HostBinding('class.overing')
-  isOvering = false;
-
-  @HostListener('mouseover')
-  onMouseOver() {
-    this.isOvering = true;
-  }
-
-  @HostListener('mouseout')
-  onMouseOut() {
-    this.isOvering = false;
-  }
-}