Translate Login and Home

src/app/core/shell/breadcrumb/breadcrumb.component.html

@@ -1,24 +1,24 @@
 <nav class="breadcrumb-wrapper">
   <ul class="breadcrumb">
-    <span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
+    <span #breadcrumb class="breadcrumb-title">{{ 'labels.breadcrumbs.' + breadcrumbs[breadcrumbs.length-1].label | translate }}</span>
     <span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
       <li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
         <span *ngIf="!last" class="breadcrumb-link">
-          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label }}</a>
-          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label }}</span>
+          <a *ngIf="breadcrumb.url" [routerLink]="breadcrumb.url">{{ breadcrumb.label | translate }}</a>
+          <span *ngIf="!breadcrumb.url">{{ breadcrumb.label | translate }}</span>
         </span>
-        <span *ngIf="last">{{ breadcrumb.label }}</span>
+        <span *ngIf="last">{{ breadcrumb.label | translate }}</span>
       </li>
     </span>
   </ul>
 </nav>
 
 <ng-template #templateBreadcrumb let-popover="popover">
-  <h2>Breadcrumbs</h2>
+  <h2>{{ 'labels.popovers.Breadcrumbs' | translate }}</h2>
   <p class="mw300">This will show the user's current location in the app.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
-    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
-    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
-    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+    <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">{{ 'labels.buttons.Close' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();previousStep()">{{ 'labels.buttons.Back' | translate }}</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">{{ 'labels.buttons.Next' | translate }}</button>
   </div>
 </ng-template>

src/app/core/shell/sidenav/sidenav.component.html

@@ -8,7 +8,7 @@
     <!-- TODO: Allow customization by organization -->
     <div class="app-brand" [routerLink]="['/home']">
       <img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
-      <span #logo class="app-logo-text text-muted">Mifos</span>
+      <span #logo class="app-logo-text text-muted">{{ 'APP_NAME' | translate }}</span>
     </div>
 
     <div class="app-user">
@@ -20,10 +20,10 @@
         {{ username }}
       </span>
       <div #userPanel class="app-user-controls">
-        <button class="xs-button" mat-icon-button matTooltip="Settings" [routerLink]="['/settings']">
+        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Settings' | translate }}" [routerLink]="['/settings']">
           <fa-icon icon="cog"></fa-icon>
         </button>
-        <button class="xs-button" mat-icon-button matTooltip="Sign Out" (click)="logout()">
+        <button class="xs-button" mat-icon-button matTooltip="{{ 'tooltips.Sign Out' | translate }}" (click)="logout()">
           <fa-icon icon="sign-out-alt"></fa-icon>
         </button>
       </div>
@@ -34,7 +34,7 @@
       <div #frequentlyAccessed>
       <div class="mt-1 mb-1 nav-item-sep">
         <mat-divider></mat-divider>
-        <span class="text-muted icon-menu-title">Frequently Accessed</span>
+        <span class="text-muted icon-menu-title">{{ 'labels.menus.Frequently Accessed' | translate }}</span>
       </div>
       </div>
       <div class="icon-menu">
@@ -47,7 +47,7 @@
 
       <div class="nav-item-sep">
         <mat-divider></mat-divider>
-        <span class="text-muted">Main Items</span>
+        <span class="text-muted">{{ 'labels.menus.Main Items' | translate }}</span>
       </div>
 
       <mat-nav-list>
@@ -55,61 +55,61 @@
           <mat-icon matListIcon >
             <fa-icon icon="tachometer-alt" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #dashboard>Dashboard</a>
+          <a matLine #dashboard>{{ 'labels.menus.Dashboard' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/navigation']" matTooltip="Navigation">
           <mat-icon matListIcon>
             <fa-icon icon="location-arrow" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #navigation>Navigation</a>
+          <a matLine #navigation>{{ 'labels.menus.Navigation' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="Checker Inbox and Tasks">
           <mat-icon matListIcon>
             <i class="fa fa-check" ></i>
           </mat-icon>
-          <a matLine>Checker Inbox and Tasks</a>
+          <a matLine>{{ 'labels.menus.Checker Inbox and Tasks' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/collections/individual-collection-sheet']" matTooltip="Individual Collection Sheet">
           <mat-icon matListIcon>
             <i class="fa fa-tasks "></i>
           </mat-icon>
-          <a matLine>Individual Collection Sheet</a>
+          <a matLine>{{ 'labels.menus.Individual Collection Sheet' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/notifications']" matTooltip="Notifications">
           <mat-icon matListIcon>
             <fa-icon icon="bell" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Notifications</a>
+          <a matLine>{{ 'labels.menus.Notifications' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/journal-entries/frequent-postings']" matTooltip="Frequent Postings">
           <mat-icon matListIcon>
             <fa-icon icon="sync" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #frequentPostings>Frequent Postings</a>
+          <a matLine #frequentPostings>{{ 'labels.menus.Frequent Postings' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="Create Journal Entry">
           <mat-icon matListIcon>
             <fa-icon icon="plus" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #createJournalEntry>Create Journal Entry</a>
+          <a matLine #createJournalEntry>{{ 'labels.menus.Create Journal Entry' | translate }}</a>
         </mat-list-item>
         <mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="Chart Of Accounts">
           <mat-icon matListIcon>
             <fa-icon icon="sitemap" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine #chartOfAccounts>Chart of Accounts</a>
+          <a matLine #chartOfAccounts>{{ 'labels.menus.Chart of Accounts' | translate }}</a>
         </mat-list-item>
         <mat-list-item (click)="showKeyboardShortcuts()" matTooltip="Keyboard Shortcuts">
           <mat-icon matListIcon>
             <fa-icon icon="keyboard" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Keyboard Shortcuts</a>
+          <a matLine>{{ 'labels.menus.Keyboard Shortcuts' | translate }}</a>
         </mat-list-item>
         <mat-list-item matTooltip="Help">
           <mat-icon matListIcon (click)="help()">
             <fa-icon icon="question-circle" size="sm"></fa-icon>
           </mat-icon>
-          <a matLine>Help</a>
+          <a matLine>{{ 'labels.menus.Help' | translate }}</a>
         </mat-list-item>
       </mat-nav-list>
 
@@ -130,7 +130,7 @@
 </ng-template>
 
 <ng-template #templateUserPanel let-popover="popover">
-  <h2>User Panel</h2>
+  <h2>{{ 'labels.menus.User Panel' | translate }}</h2>
   <p class="mw300">This section contains user name, user photograph, user settings and sign out button.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -140,7 +140,7 @@
 </ng-template>
 
 <ng-template #templateFrequentlyAccessed let-popover="popover">
-  <h2>Frequently Accessed</h2>
+  <h2>{{ 'labels.menus.Frequently Accessed' | translate }}</h2>
   <p class="mw300">This contains shortcut to the frequently accessed components.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -150,7 +150,7 @@
 </ng-template>
 
 <ng-template #templateDashboard let-popover="popover">
-  <h2>Dashboard</h2>
+  <h2>{{ 'labels.menus.Dashboard' | translate }}</h2>
   <p class="mw300">This will navigate the user to dashboard component.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -160,7 +160,7 @@
 </ng-template>
 
 <ng-template #templateNavigation let-popover="popover">
-  <h2>Navigation</h2>
+  <h2>{{ 'labels.menus.Navigation' | translate }}</h2>
   <p class="mw300">This will navigate the user to entity navigation screen.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -170,7 +170,7 @@
 </ng-template>
 
 <ng-template #templateFrequentPostings let-popover="popover">
-  <h2>Frequent Postings</h2>
+  <h2>{{ 'labels.menus.Frequent Postings' | translate }}</h2>
   <p class="mw300">Shortcut to Journal entry screen with accouting rules in place</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -180,7 +180,7 @@
 </ng-template>
 
 <ng-template #templateCreateJournalEntry let-popover="popover">
-  <h2>Create Journal Entry</h2>
+  <h2>{{ 'labels.menus.Create Journal Entry' | translate }}</h2>
   <p class="mw300">Shortcut to the create journal entry screen.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -190,7 +190,7 @@
 </ng-template>
 
 <ng-template #templateChartOfAccounts let-popover="popover">
-  <h2>Chart of Accounts</h2>
+  <h2>{{ 'labels.menus.Chart of Accounts' | translate }}</h2>
   <p class="mw300">Shortcut to chart of accounts screen to add/modify the ledger accounts.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>

src/app/core/shell/toolbar/toolbar.component.html

@@ -13,31 +13,31 @@
 
     <a #institution mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
       <fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
-      {{ 'Institution' | translate }}
+      {{ 'labels.menus.Institution' | translate }}
     </a>
 
     <span fxHide.lt-lg="true">
 
       <a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
         <fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
-        {{ 'Accounting' | translate }}
+        {{ 'labels.menus.Accounting' | translate }}
       </a>
       <a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
         <fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
-        {{ 'Reports' | translate }}
+        {{ 'labels.menus.Reports' | translate }}
       </a>
       <a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
-        {{ 'Admin' | translate }}
+        {{ 'labels.menus.Admin' | translate }}
       </a>
       <a #selfService mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
         <fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
-        {{ 'Self Service' | translate }}
+        {{ 'labels.menus.Self Service' | translate }}
       </a>
 
       <a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
         <fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
-        Configuration Wizard
+        {{ 'labels.menus.Configuration Wizard' | translate }}
       </a>
 
     </span>
@@ -57,7 +57,7 @@
   <div #themePicker>
     <mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
   </div>
-  
+
   <div #notifications>
     <mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
   </div>
@@ -70,40 +70,40 @@
 </mat-toolbar>
 
 <mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item routerLink="/clients">Clients</button>
-  <button mat-menu-item routerLink="/groups">Groups</button>
-  <button mat-menu-item routerLink="/centers">Centers</button>
+  <button mat-menu-item routerLink="/clients">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item routerLink="/groups">{{ 'labels.menus.Groups' | translate }}</button>
+  <button mat-menu-item routerLink="/centers">{{ 'labels.menus.Centers' | translate }}</button>
   <span fxHide.lg>
-    <button mat-menu-item [routerLink]="['/accounting']">Accounting</button>
-    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">Reports</button>
-    <button mat-menu-item [matMenuTriggerFor]="adminMenu">Admin</button>
-    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">Self Service</button>
+    <button mat-menu-item [routerLink]="['/accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="reportsMenu">{{ 'labels.menus.Reports' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="adminMenu">{{ 'labels.menus.Admin' | translate }}</button>
+    <button mat-menu-item [matMenuTriggerFor]="selfServiceMenu">{{ 'labels.menus.Self Service' | translate }}</button>
   </span>
 </mat-menu>
 
 <!-- Toolbar Menus -->
 <mat-menu #reportsMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/reports']">All</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Client']">Clients</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Loan']">Loans</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Savings']">Savings</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Fund']">Funds</button>
-  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">Accounting</button>
-  <button mat-menu-item [routerLink]="['/xbrl']">XBRL</button>
+  <button mat-menu-item [routerLink]="['/reports']">{{ 'labels.menus.All' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Client']">{{ 'labels.menus.Clients' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Loan']">{{ 'labels.menus.Loans' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Savings']">{{ 'labels.menus.Savings' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Fund']">{{ 'labels.menus.Funds' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/reports', 'Accounting']">{{ 'labels.menus.Accounting' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/xbrl']">{{ 'labels.menus.XBRL' | translate }}</button>
 </mat-menu>
 
 <mat-menu #adminMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/users']">Users</button>
-  <button mat-menu-item [routerLink]="['/organization']">Organization</button>
-  <button mat-menu-item [routerLink]="['/system']">System</button>
-  <button mat-menu-item [routerLink]="['/products']">Products</button>
-  <button mat-menu-item [routerLink]="['/templates']">Templates</button>
+  <button mat-menu-item [routerLink]="['/users']">{{ 'labels.menus.Users' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/organization']">{{ 'labels.menus.Organization' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/system']">{{ 'labels.menus.System' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/products']">{{ 'labels.menus.Products' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/templates']">{{ 'labels.menus.Templates' | translate }}</button>
 </mat-menu>
 
 <mat-menu #selfServiceMenu="matMenu" [overlapTrigger]="false">
-  <button mat-menu-item [routerLink]="['/self-service/users']">User Management</button>
-  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">App Configuration</button>
-  <button mat-menu-item [routerLink]="['/self-service/task-management']">Task Management</button>
+  <button mat-menu-item [routerLink]="['/self-service/users']">{{ 'labels.menus.User Management' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/self-service/app-configuration']">{{ 'labels.menus.App Configuration' | translate }}</button>
+  <button mat-menu-item [routerLink]="['/self-service/task-management']">{{ 'labels.menus.Task Management' | translate }}</button>
 </mat-menu>
 
 <!-- Application User Help Menu -->
@@ -112,31 +112,31 @@
     <mat-icon matListIcon>
       <fa-icon icon="question-circle" size="sm"></fa-icon>
     </mat-icon>
-    <span>Help</span>
+    <span>{{ 'labels.menus.Help' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/profile']">
     <mat-icon>
       <fa-icon icon="user" size="sm"></fa-icon>
     </mat-icon>
-    <span>Profile</span>
+    <span>{{ 'labels.menus.Profile' | translate }}</span>
   </button>
   <button mat-menu-item [routerLink]="['/settings']">
     <mat-icon>
       <fa-icon icon="cog" size="sm"></fa-icon>
     </mat-icon>
-    <span>Settings</span>
+    <span>{{ 'labels.menus.Settings' | translate }}</span>
   </button>
   <button mat-menu-item (click)="logout()" id="logout">
     <mat-icon>
       <fa-icon icon="sign-out-alt" size="sm"></fa-icon>
     </mat-icon>
-    <span>Sign Out</span>
+    <span>{{ 'labels.menus.Sign Out' | translate }}</span>
   </button>
 </mat-menu>
 
 
 <ng-template #templateInstitution let-popover="popover">
-  <h2>Institution</h2>
+  <h2>{{ 'labels.menus.Institution' | translate }}</h2>
   <p class="mw300">This button will be used for individual accounts, groups and centers</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -145,7 +145,7 @@
 </ng-template>
 
 <ng-template #templateAccounting let-popover="popover">
-  <h2>Accounting</h2>
+  <h2>{{ 'labels.menus.Accounting' | translate }}</h2>
   <p class="mw300">This button opens the menu to access the system tools required by the accounting department.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -155,7 +155,7 @@
 </ng-template>
 
 <ng-template #templateReports let-popover="popover">
-  <h2>Reports</h2>
+  <h2>{{ 'labels.menus.Reports' | translate }}</h2>
   <p class="mw300">Dropdown provides access to all types of system reports including the defualt reports provided by the Mifos and system reports that will be developed by the organization.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -165,7 +165,7 @@
 </ng-template>
 
 <ng-template #templateAdmin let-popover="popover">
-  <h2>Admin</h2>
+  <h2>{{ 'labels.menus.Admin' | translate }}</h2>
   <p class="mw300">This is where the system is setup according to your organization including users, organization, products and templates.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -175,7 +175,7 @@
 </ng-template>
 
 <ng-template #templateSelfService let-popover="popover">
-  <h2>Self Service</h2>
+  <h2>{{ 'labels.menus.Self Service' | translate }}</h2>
   <p class="mw300">Dropdown provides access to self service user administrative portal, app configuration and task management.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -185,7 +185,7 @@
 </ng-template>
 
 <ng-template #templateConfigWizard let-popover="popover">
-  <h2>Configuration Wizard</h2>
+  <h2>{{ 'labels.menus.Configuration Wizard' | translate }}</h2>
   <p class="mw300">This buttons opens up the configuration wizard to help the user in initial setup and application tour.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -195,7 +195,7 @@
 </ng-template>
 
 <ng-template #templateGlobalSearch let-popover="popover">
-  <h2>Global Search</h2>
+  <h2>{{ 'labels.menus.Global Search' | translate }}</h2>
   <p class="mw300">This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -205,7 +205,7 @@
 </ng-template>
 
 <ng-template #templateLanguageSelector let-popover="popover">
-  <h2>Language Selector</h2>
+  <h2>{{ 'labels.menus.Language Selector' | translate }}</h2>
   <p class="mw300">Organization can select a language here from the available languages here.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -215,7 +215,7 @@
 </ng-template>
 
 <ng-template #templateThemePicker let-popover="popover">
-  <h2>Theme Picker</h2>
+  <h2>{{ 'labels.menus.Theme Picker' | translate }}</h2>
   <p class="mw300">This will be used to choose a theme as per organization will.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -225,7 +225,7 @@
 </ng-template>
 
 <ng-template #templateNotifications let-popover="popover">
-  <h2>Notifications</h2>
+  <h2>{{ 'labels.menus.Notifications' | translate }}</h2>
   <p class="mw300">This shows all the notifications.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
@@ -235,7 +235,7 @@
 </ng-template>
 
 <ng-template #templateAppMenu let-popover="popover">
-  <h2>Application Menu</h2>
+  <h2>{{ 'labels.menus.Application Menu' | translate }}</h2>
   <p class="mw300">This will have logged in user settings and sign out button.</p>
   <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
     <button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>