58 lines
1.3 KiB
Markdown
58 lines
1.3 KiB
Markdown
# Pipes
|
|
|
|
Pipes transform output in the template.
|
|
|
|
<img src="../img/pipes.png" alt="overview" width="300"/>
|
|
|
|
The Data remains the same as the output change.
|
|
|
|
The right place to place a pipe, is in the template.
|
|
|
|
Example of piping
|
|
```html
|
|
<li
|
|
class="list-group-item"
|
|
*ngFor="let server of servers | filter:filteredStatus:'status'"
|
|
[ngClass]="getStatusClasses(server)">
|
|
<span
|
|
class="badge">
|
|
{{ server.status }}
|
|
</span>
|
|
<strong>{{ server.name | shorten:15 }}</strong> |
|
|
{{ server.instanceType | uppercase }} |
|
|
{{ server.started | date:'fullDate' | uppercase }}
|
|
</li>
|
|
```
|
|
|
|
Chaining the pipes together the order is important.
|
|
|
|
Angular pipe [documentation](https://angular.io/api?query=pipe)
|
|
|
|
## Create custom pipe
|
|
|
|
```ts
|
|
import { Pipe, PipeTransform } from '@angular/core';
|
|
|
|
@Pipe({
|
|
name: 'filter',
|
|
pure: false
|
|
})
|
|
export class FilterPipe implements PipeTransform {
|
|
|
|
transform(value: any, filterString: string, propName: string): any {
|
|
if (value.length === 0 || filterString === '') {
|
|
return value;
|
|
}
|
|
const resultArray = [];
|
|
for (const item of value) {
|
|
if (item[propName] === filterString) {
|
|
resultArray.push(item);
|
|
}
|
|
}
|
|
return resultArray;
|
|
}
|
|
|
|
}
|
|
```
|
|
|
|
If Data are changed, the pipe dont get updated. For example if the application applies a filer pipe. |