使用angular 內部pipe，做顯示文字格式的改變

只改變顯示文字，而不改變文字內容

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>

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 { }

src/app/over-highlight.directive.ts

@@ -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;
-  }
-}