i18n is working

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

@@ -8,7 +8,11 @@
     <mat-tab [aria-label]="MainMenu.Group">
       <ng-template mat-tab-label>
         <!--<mat-icon>group</mat-icon>-->
-        <div class="icon-item" matTooltip="Group" matTooltipPosition="after">
+        <div
+          class="icon-item"
+          matTooltip="{{ 'group.label' | translate }}"
+          matTooltipPosition="after"
+        >
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -37,7 +41,7 @@
           }}"
           matBadgeColor="accent"
           matBadgePosition="above after"
-          matTooltip="Chat"
+          matTooltip="{{ 'chat.label' | translate }}"
           matTooltipPosition="after"
         >
           <svg
@@ -63,7 +67,7 @@
         <!--<mat-icon>device_hub</mat-icon>-->
         <div
           class="icon-item"
-          matTooltip="Organization"
+          matTooltip="{{ 'organization.chart' | translate }}"
           matTooltipPosition="after"
         >
           <svg
@@ -100,7 +104,7 @@
           }}"
           matBadgeColor="accent"
           matBadgePosition="above after"
-          matTooltip="Message"
+          matTooltip="{{ 'message.label' | translate }}"
           matTooltipPosition="after"
         >
           <svg

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.ts

@@ -17,7 +17,7 @@ import {
   CreateChatDialogData,
   CreateChatDialogResult
 } from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
-import { Subscription, Observable } from 'rxjs';
+import { Subscription, Observable, merge } from 'rxjs';
 import { Store, select } from '@ngrx/store';
 
 import * as AppStore from '@app/store';
@@ -49,7 +49,7 @@ import {
 } from '@app/types';
 import { MessageBoxComponent } from './left-sidenav/message.component';
 import { environment } from '../../../../environments/environment';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 
 export enum MainMenu {
   Group = 'GROUP',
@@ -83,6 +83,8 @@ export class LeftSideComponent implements OnInit, OnDestroy {
   @ViewChild('messageBoxComponent', { static: false })
   messageBoxComponent: MessageBoxComponent;
 
+  onLangChangeSubscription: Subscription;
+
   badgeChatUnReadCount: number;
   badgeChatUnReadCountSubscription: Subscription;
   badgeMessageUnReadCount$: Observable<number>;
@@ -149,6 +151,14 @@ export class LeftSideComponent implements OnInit, OnDestroy {
 
     this.setFabInitial(MainMenu.Group);
     this.currentTabLable = MainMenu.Group;
+
+    this.onLangChangeSubscription = merge(
+      this.translateService.onLangChange,
+      this.translateService.onDefaultLangChange,
+      this.translateService.onTranslationChange
+    ).subscribe(() => {
+      this.setFabInitial(this.currentTabLable);
+    });
   }
 
   ngOnDestroy(): void {
@@ -158,6 +168,9 @@ export class LeftSideComponent implements OnInit, OnDestroy {
     if (!!this.loginResSubscription) {
       this.loginResSubscription.unsubscribe();
     }
+    if (!!this.onLangChangeSubscription) {
+      this.onLangChangeSubscription.unsubscribe();
+    }
 
     if (!!this.badgeMessageInterval) {
       clearInterval(this.badgeMessageInterval);