Merge pull request #1549 from rbalet/docs/test-app/language-switch

docs(test-app): language switch

Author: CodeAndWeb

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

@@ -1,3 +1,5 @@
+<app-language-switch></app-language-switch>
+
 <div class="title">
     <h1>{{ 'demo.title' | translate }}</h1>
 </div>

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

@@ -1,16 +1,26 @@
-import { Component } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
 import { _, TranslateDirective, TranslatePipe, TranslateService } from "@ngx-translate/core";
-import { StandaloneComponent } from "./standalone.component";
+import { map } from 'rxjs';
+import { TranslationObject } from '../../../ngx-translate/src/public-api';
+import { LanguageSwitchComponent } from './language-switch/language-switch.component';
+import { StandaloneComponent } from "./standalone/standalone.component";
 
 
 @Component({
     selector: "app-root",
     standalone: true,
-    imports: [TranslateDirective, TranslatePipe, StandaloneComponent],
-    templateUrl: "./app.component.html",
-    styleUrl: "./app.component.scss"
+    imports: [
+      // Components
+      LanguageSwitchComponent,
+      StandaloneComponent,
+
+      // Vendors
+      TranslateDirective,
+      TranslatePipe,
+      ],
+    templateUrl: "./app.component.html"
 })
-export class AppComponent
+export class AppComponent implements OnInit
 {
     title = _("test-app");
 
@@ -19,4 +29,14 @@ export class AppComponent
         this.translate.setDefaultLang('en');
         this.translate.use('en');
     }
+
+    ngOnInit() {
+      // Service Get method with a set of string[]
+      this.translate
+        .get(['demo.simple.text-as-attribute', 'demo.simple.text-as-content'])
+        .pipe(map((arr: TranslationObject) => {
+          return Object.values(arr).join(', ')
+        }))
+        .subscribe(console.info);
+    }
 }

projects/test-app/src/app/app.component.ts

@@ -0,0 +1,3 @@
+@for(lang of translateService.getLangs(); track lang) {
+  <button (click)="translateService.use(lang)" [class.active]="translateService.currentLang === lang">{{ lang }}</button>
+}

projects/test-app/src/app/language-switch/language-switch.component.html

@@ -0,0 +1,36 @@
+:host{
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+
+  button {
+    background-color: var(--mat-sys-secondary);
+    border: none;
+    color: var(--mat-sys-on-secondary);
+    padding: 0.25rem 0.5rem;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin-left: 1rem;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+    min-width: 120px;
+    min-height: 46px;
+    cursor: pointer;
+    box-shadow: var(--mat-sys-level2);
+
+    &:hover {
+      box-shadow: var(--mat-sys-level3);
+      &:active {
+        box-shadow: var(--mat-sys-level1);
+      }
+    }
+
+    &.active {
+      background-color: var(--mat-sys-primary);
+      color: var(--mat-sys-on-primary);
+
+    }
+  }
+}

projects/test-app/src/app/language-switch/language-switch.component.scss

@@ -0,0 +1,12 @@
+import { Component, inject } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-language-switch',
+  standalone: true,
+  styleUrl: './language-switch.component.scss',
+  templateUrl: './language-switch.component.html',
+})
+export class LanguageSwitchComponent {
+  translateService = inject(TranslateService);
+}

projects/test-app/src/app/language-switch/language-switch.component.ts

@@ -0,0 +1,12 @@
+<div class="standalone-container">
+  <div class="title">
+      <h1>{{ 'standalone-component.title' | translate }}</h1>
+  </div>
+  <div>
+      <h2>Simple translations without parameters</h2>
+
+      <p [translate]="'demo.simple.text-as-attribute'"></p>
+
+      <p translate>demo.simple.text-as-content</p>
+  </div>
+</div>

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

@@ -0,0 +1,5 @@
+.standalone-container {
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-small);
+  padding: 0 var(--space);
+}

projects/test-app/src/app/standalone.component.ts

@@ -0,0 +1,16 @@
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { TranslateDirective, TranslatePipe } from "@ngx-translate/core";
+
+
+@Component({
+    selector: "app-standalone-component",
+    standalone: true,
+    imports: [TranslateDirective, TranslatePipe],
+    styleUrl: "./standalone.component.scss",
+    templateUrl: "./standalone.component.html",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StandaloneComponent
+{
+
+}

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

@@ -1 +1,43 @@
-/* You can add global styles to this file, and also import other style files */
+:root {
+  --mat-sys-primary: #c2282b;
+  --mat-sys-on-primary: #fff;
+
+  --mat-sys-secondary: #3f4258;
+  --mat-sys-on-secondary: #fff;
+
+  --mat-sys-surface-dim: #ffe8f1;
+
+  --mat-sys-outline: #e5e5e5;
+
+  --mat-sys-corner-small: 8px;
+  --mat-sys-corner-medium: 12px;
+
+  --mat-sys-level0: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level1: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level2: 0px 3px 3px -2px rgba(0, 0, 0, .2), 0px 3px 4px 0px rgba(0, 0, 0, .14), 0px 1px 8px 0px rgba(0, 0, 0, .12);
+  --mat-sys-level3: 0px 3px 5px -1px rgba(0, 0, 0, .2), 0px 6px 10px 0px rgba(0, 0, 0, .14), 0px 1px 18px 0px rgba(0, 0, 0, .12);
+
+  --space-smallest: 4px;
+  --space-smaller: 8px;
+  --space-small: 12px;
+  --space: 16px;
+}
+
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+p, .translated{
+  background-color: var(--mat-sys-surface-dim);
+  padding:0.5rem 1rem;
+}
+
+.title {
+
+  h1 {
+    background-color: var(--mat-sys-surface-dim);
+    border-radius: var(--mat-sys-corner-small);
+    padding: var(--space) var(--space-small);
+  }
+}