Übersetzung in Kleinbuchstaben über einen Kanal in Angular

Mit dem Kanal LowerCasePipe kann man einen String in Kleinbuchstaben umwandeln. Probieren wir es praktisch aus. Angenommen, in der Komponentenklasse haben wir den folgenden String:

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

Geben wir unseren String in der Template-Datei aus und wenden dabei unseren Kanal an:

html<div>
  {{ name | lowercase }}
</div>

Ergebnis der Codeausführung:

html<div>
  john
</div>

typescriptexport class AppComponent {
  products: string[] = ['Milk', 'Bananas', 'Fish', 'Bread'];
}