Update Docs - Pipe

docs/pipes.md

@@ -0,0 +1,56 @@
+# 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;
+  }
+
+}
+```