docs(test-app): pipe with params example

Author: rbalet

projects/test-app/public/i18n-isolated/de.json

@@ -1,12 +1,13 @@
 {
-    "demo": {
-        "simple": {
-            "text-as-attribute": "Isolated: Text als Attribut",
-            "text-as-content": "Isolated: Text als Inhalt"
-        },
-        "title": "Isolated: Test Anwendung"
+  "demo": {
+    "simple": {
+      "text-as-attribute": "Isolated: Text als Attribut",
+      "text-as-content": "Isolated: Text als Inhalt",
+      "text-as-pipe-with-params": "Isolated: Text als Pipe mit {{value}}"
     },
-    "standalone-component": {
-        "title": "Isolated: Eigenständige Komponente"
-    }
+    "title": "Isolated: Test Anwendung"
+  },
+  "standalone-component": {
+    "title": "Isolated: Eigenständige Komponente"
+  }
 }

projects/test-app/public/i18n-isolated/en.json

@@ -1,12 +1,13 @@
 {
-    "demo": {
-        "simple": {
-            "text-as-attribute": "Isolated: Text as attribute",
-            "text-as-content": "Isolated: Text as content"
-        },
-        "title": "Isolated: Test Application"
+  "demo": {
+    "simple": {
+      "text-as-attribute": "Isolated: Text as attribute",
+      "text-as-content": "Isolated: Text as content",
+      "text-as-pipe-with-params": "Isolated: Text as pipe with {{value}}"
     },
-    "standalone-component": {
-        "title": "Isolated: Standalone Component"
-    }
+    "title": "Isolated: Test Application"
+  },
+  "standalone-component": {
+    "title": "Isolated: Standalone Component"
+  }
 }

projects/test-app/public/i18n/de.json

@@ -1,12 +1,13 @@
 {
-    "demo": {
-        "simple": {
-            "text-as-attribute": "Global: Text als Attribut",
-            "text-as-content": "Global: Text als Inhalt"
-        },
-        "title": "Global: Test Anwendung"
+  "demo": {
+    "simple": {
+      "text-as-attribute": "Global: Text als Attribut",
+      "text-as-content": "Global: Text als Inhalt",
+      "text-as-pipe-with-params": "Global: Text als Pipe mit {{value}}"
     },
-    "standalone-component": {
-        "title": "Global: Eigenständige Komponente"
-    }
+    "title": "Global: Test Anwendung"
+  },
+  "standalone-component": {
+    "title": "Global: Eigenständige Komponente"
+  }
 }

projects/test-app/public/i18n/en.json

@@ -1,12 +1,13 @@
 {
-    "demo": {
-        "simple": {
-            "text-as-attribute": "Global: Text as attribute",
-            "text-as-content": "Global: Text as content"
-        },
-        "title": "Global: Test Application"
+  "demo": {
+    "simple": {
+      "text-as-attribute": "Global: Text as attribute",
+      "text-as-content": "Global: Text as content",
+      "text-as-pipe-with-params": "Global: Text as pipe with {{value}}"
     },
-    "standalone-component": {
-        "title": "Global: Standalone Component"
-    }
+    "title": "Global: Test Application"
+  },
+  "standalone-component": {
+    "title": "Global: Standalone Component"
+  }
 }

projects/test-app/src/app/components/page-content/page-content.component.html

@@ -7,6 +7,8 @@ <h2>Simple translations without parameters</h2>
     <p [translate]="'demo.simple.text-as-attribute'"></p>
 
     <p translate>demo.simple.text-as-content</p>
+
+    <p>{{ "demo.simple.text-as-pipe-with-params" | translate: { value: "params" } }}</p>
 </div>
 
 <app-standalone-component />

projects/test-app/src/app/components/page-content/page-content.component.ts

@@ -1,4 +1,7 @@
 import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatSelectModule } from "@angular/material/select";
 import { TranslateDirective, TranslatePipe } from "@ngx-translate/core";
 import { StandaloneComponent } from "../standalone/standalone.component";
 
@@ -11,6 +14,12 @@ import { StandaloneComponent } from "../standalone/standalone.component";
         // Vendors
         TranslateDirective,
         TranslatePipe,
+
+        // Mat
+        FormsModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatFormFieldModule,
     ],
     templateUrl: "./page-content.component.html",
     changeDetection: ChangeDetectionStrategy.OnPush,

projects/test-app/src/app/components/standalone/standalone.component.html

@@ -8,5 +8,7 @@ <h2>Simple translations without parameters</h2>
         <p [translate]="'demo.simple.text-as-attribute'">Should be replaced</p>
 
         <p translate>demo.simple.text-as-content</p>
+
+        <p>{{ "demo.simple.text-as-pipe-with-params" | translate: { value: "params" } }}</p>
     </div>
 </div>

projects/test-app/src/app/components/standalone/standalone.component.scss

@@ -2,4 +2,5 @@
     border: 1px solid var(--mat-sys-outline);
     border-radius: var(--mat-sys-corner-small);
     padding: 0 var(--space);
+    margin-bottom: var(--space);
 }