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);
+}