SlicePipe，可以做文字排版切割，起始位置從0算起

{{value_expressiong |slice: start [:end]}}
也可以套用在陣列中

src/app/app.component.html

@@ -1,3 +1,13 @@
-<div>Upper Case: {{ 'angular' | uppercase }}</div>
-<div>lower Case: {{ 'angular' | lowercase }}</div>
-<div>Title Case: {{ 'angular' | titlecase }}</div>
+<h3>SlicePipe 使用在字串上</h3>
+<div>
+  完整字串 - <strong>{{ value }}</strong>
+</div>
+<div>
+  Slice 字串 - <strong>{{ value | slice: 0:6 }}</strong>
+</div>
+<hr />
+<h3>Slice Pipe 使用在陣列上</h3>
+<app-task *ngFor="let task of tasks | slice: 0:3" [task]="task"></app-task>
+<div style="margin-left: 20px">
+  待辦事項共 {{ tasks.length }} 件
+</div>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Task } from './task';
 
 
 @Component({
@@ -7,5 +8,13 @@ import { Component } from '@angular/core';
   styleUrls: [ './app.component.css' ]
 })
 export class AppComponent  {
+  value = '只會顯示七個字（這裡全不顯示）';
+
+  tasks: Task[] = [
+    new Task({ TaskSn: '001', TaskName: '待辦事項 A', State: 'Finish' }),
+    new Task({ TaskSn: '002', TaskName: '待辦事項 B', State: 'Doing' }),
+    new Task({ TaskSn: '003', TaskName: '待辦事項 C', State: 'None' }),
+    new Task({ TaskSn: '004', TaskName: '待辦事項 D', State: 'None' }),
+  ];
   }
 

src/app/app.module.ts

@@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule } from '@angular/forms';
 
 import { AppComponent } from './app.component';
+import { TaskComponent } from './task/task.component';
 
 @NgModule({
   imports:      [ BrowserModule, FormsModule ],
-  declarations: [ AppComponent ],
+  declarations: [ AppComponent, TaskComponent ],
   bootstrap:    [ AppComponent ]
 })
 export class AppModule { }

src/app/task.ts

@@ -0,0 +1,9 @@
+export class Task {
+  constructor(initData?: Partial<Task>) {
+    Object.assign(this, initData);
+  }
+
+  TaskSn!: string;
+  TaskName!: string;
+  State!: string;
+}

src/app/task/task.component.css

@@ -0,0 +1,14 @@
+:host {
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 20px;
+  padding-left: 5px;
+  padding-right: 10px;
+  border: solid 1px #aaa;
+  line-height: 32pt;
+}
+
+:host(.odd) {
+  background-color: #777;
+  color: white;
+}

src/app/task/task.component.html

@@ -0,0 +1,6 @@
+<span>{{ task.TaskName }}</span>
+<ng-container [ngSwitch]="task.State">
+  <span *ngSwitchCase="'Doing'">進行中</span>
+  <span *ngSwitchCase="'Finish'">已完成</span>
+  <span *ngSwitchDefault>未安排</span>
+</ng-container>

src/app/task/task.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+
+import { Task } from '../task';
+
+@Component({
+  selector: 'app-task',
+  templateUrl: './task.component.html',
+  styleUrls: ['./task.component.css']
+})
+export class TaskComponent {
+  @Input() task!: Task;
+}