การเชื่อมต่อพายป์ใน Angular

เพื่อนำพายป์หลายประเภทมาใช้กับค่าเดียว สามารถใช้การเชื่อมต่อพายป์ได้ โดยเขียนพายป์ทั้งหมดที่เราต้องการ ผ่านสัญลักษณ์ |

มาสร้างคุณสมบัติ name ในคลาสของคอมโพเนนต์หลักกัน:

app/app.component.tsexport class AppComponent {
  name: string = 'john d.';
}

ในเทมเพลต HTML ให้เขียนแสดงชื่อผู้ใช้เป็นตัวพิมพ์ใหญ่ โดยตัดส่วนของสตริง ' d.' ออก:

app/app.component.html<div>{{ name | uppercase | slice:0:4 }}</div>