Translator

server/i18n/de.json

@@ -2,7 +2,7 @@
     "home": {
         "HEADER_TEXT": "Sie befinden sich in Testnet",
         "COUNTDOWN": "Mainnet-Countdown",
-        "EXPLORE_IT": ", Entdecke es",
+        "EXPLORE_IT": "Entdecke es",
         "VIEWALL": "Alle Diagramme anzeigen",
         "BLOCKCHAIN_HEIGHT": "Blockchain Höhe",
         "LATEST_BLOCK": "Letzter Block",
@@ -15,7 +15,9 @@
         "DIFFICULTY" : "Schwierigkeit",
         "POW_ALGO" : "Pow Algo",
         "INPUTS" : "Eingänge",
+        "INPUT" : "Eingang",
         "OUTPUTS" : "Ausgänge",
+        "OUTPUT" : "Ausgabe",
         "KERNELS" : "Kernel",
         "EPIC" : "Epos",
         "EXPLORE" : "Erkunden",
@@ -29,13 +31,25 @@
         "TRANSACTION_FEES" : "Transkationsgebühren",
         "SUPPLY_GROWTH" : "Angebotswachstum",
         "HASHRATE_GROWTH_CHART" : "HashRate-Wachstumstabelle",
-        "BLOCK INTERVAL" : "Sperrintervall",
+        "BLOCK_INTERVAL" : "Sperrintervall",
         "TRANSACTIONS_VS_DATE" : "Transaktionen gegen Datum",
         "DAYS" : "Tage",
         "MONTHS" : "Monate",
         "WEEK" : "Woche",
         "SEARCH_TEXT" : "Suche nach Hash oder Höhe",
-        "BLOCK_REWARD" : "Block Belohnung"
+        "BLOCK_REWARD" : "Block Belohnung",
-        
+        "NOT_FOUND" : "Seite nicht gefunden",
+        "NOT_FOUND1" : "Die von Ihnen gesuchte Seite wurde nicht gefunden",
+        "NOT_FOUND2" : "Gehe zum Explorer",
+        "COMMIT" : "verpflichten",
+        "ALGORITHM" : "Pow-Algorithmus",
+        "TYPE" : "Art",
+        "SPEND" : "Verbringen",
+        "FEATURES" : "Eigenschaften",
+        "LOCK" : "Sperren",
+        "SEARCH_RESULT" : "Suchergebnisse für",
+        "SEARCH_RESULT1" : "Ihr Suchbegriff",
+        "SEARCH_RESULT2" : "ist zu kurz",
+        "SEARCH_RESULT3" : "Bitte geben Sie mindestens sechs Zeichen ein, wenn Sie nach Hash suchen"
     }
 }

server/i18n/en.json

@@ -15,7 +15,9 @@
         "DIFFICULTY" : "Difficulty",
         "POW_ALGO" : "Pow Algo",
         "INPUTS" : "Inputs",
+        "INPUT" : "Input",
         "OUTPUTS" : "Outputs",
+        "OUTPUT" : "Output",
         "KERNELS" : "Kernels",
         "EPIC" : "Epic",
         "EXPLORE" : "Explore",
@@ -29,13 +31,25 @@
         "TRANSACTION_FEES" : "Transcation Fees",
         "SUPPLY_GROWTH" : "Supply Growth",
         "HASHRATE_GROWTH_CHART" : "HashRate Growth Chart",
-        "BLOCK INTERVAL" : "Block Interval",
+        "BLOCK_INTERVAL" : "Block Interval",
         "TRANSACTIONS_VS_DATE" : "Transcations Vs Date",
         "DAYS" : "days",
         "MONTHS" : "months",
         "WEEK" : "week",
         "SEARCH_TEXT" : "Search by hash or height",
-        "BLOCK_REWARD" : "Block Reward"
+        "BLOCK_REWARD" : "Block Reward",
-        
+        "NOT_FOUND" : "Page Not Found",
+        "NOT_FOUND1" : "Page you are looking for is not found",
+        "NOT_FOUND2" : "Go to Explorer",
+        "ALGORITHM" : "Pow Algorithm",
+        "COMMIT" : "commit",
+        "TYPE" : "Type",
+        "SPEND" : "Spend",
+        "FEATURES" : "Features",
+        "LOCK" : "Lock",
+        "SEARCH_RESULT" : "Search Results for",
+        "SEARCH_RESULT1" : "Your search term",
+        "SEARCH_RESULT2" : "is too short",
+        "SEARCH_RESULT3" : "please enter at least six characters if searching by hash"
     }
 }

src/app/app.module.ts

@@ -21,13 +21,6 @@ export class CustomLoader extends ChartService implements TranslateLoader {
   
   public getTranslation(lang): Observable<any> {
     
-    // return this.http.get(this.apiHost+'/Translation?lang='+lang).pipe(
-    //   map((res: any) => {
-    //     console.log("Data got: ");
-    //     console.log(res);
-    //     return res;
-    //   })
-    // );
     let params = new HttpParams();
     params = params.append('lang', lang);
     return this.apiGetRequest(params,'/blockchain_kernel/translator').pipe(

src/app/shared/components/footer/footer.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { TransServiceService } from '../../services/trans-service.service';
 
 @Component({
   selector: 'epic-explorer-footer',
@@ -7,7 +8,7 @@ import { DOCUMENT } from '@angular/common';
   styleUrls: ['./footer.component.css'],
 })
 export class FooterComponent implements OnInit {
-  constructor(@Inject(DOCUMENT) private document: Document) {}
+  constructor(@Inject(DOCUMENT) private document: Document,public translate: TransServiceService) {}
 
   ngOnInit() {}
 

src/app/shared/components/header/header.component.html

@@ -3,8 +3,8 @@
     <div class="container-fluid">
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ml-auto">
-		  <li *ngIf="TimeArr" class="d-none d-sm-inline-block"><h1 class="test_msg d-inline-block mb-0 align-middle mr-3">You are on Testnet</h1>
+		  <li *ngIf="TimeArr" class="d-none d-sm-inline-block"><h1 class="test_msg d-inline-block mb-0 align-middle mr-3">{{'home.HEADER_TEXT' | translate}}</h1>
-            <h1 class="test_msg align-middle mr-3 d-inline-block mb-0">Mainnet Countdown</h1>
+            <h1 class="test_msg align-middle mr-3 d-inline-block mb-0">{{'home.COUNTDOWN' | translate}}</h1>
                 <ul class="list-unstyled d-inline-block bg-white p-2 mb-0 timer">
                     <li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
                     <li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
@@ -14,37 +14,9 @@
 
           </li>
           <li class="nav-item dropdown bg-white">
-            <a
+            <select class="btn btn-outline-primary btn-rounded text-white py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
-              class="nav-link dropdown-toggle"
+              <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}} ({{ lang }})</option>
-              href="#"
+            </select>
-              id="navbarDropdown"
-              role="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              <span
-                class="flag"
-                style="background-image: url('assets/img/uk.jpg')"
-              ></span
-              >English
-            </a>
-            <div class="dropdown-menu " aria-labelledby="navbarDropdown">
-              <a class="dropdown-item p-2" href="#"
-                ><span
-                  class="flag"
-                  style="background-image: url('assets/img/uk.jpg')"
-                ></span
-                >English</a
-              >
-              <a class="dropdown-item p-2" href="#"
-                ><span
-                  class="flag"
-                  style="background-image: url('assets/img/german.jpg')"
-                ></span
-                >German</a
-              >
-            </div>
           </li>
           <button (click)="ChangeTheme()" class="theme_switch btn">
             <img
@@ -62,8 +34,8 @@
     </div>
   </nav>
  <div *ngIf="TimeArr" class="d-sm-none text-center">
-      <h1 class="test_msg d-inline-block mb-0 align-middle mr-3">You are on Testnet</h1>
+      <h1 class="test_msg d-inline-block mb-0 align-middle mr-3">{{'home.HEADER_TEXT' | translate}}</h1>
-      <h1 class="test_msg align-middle mr-3 d-inline-block mb-0">Mainnet Countdown
+      <h1 class="test_msg align-middle mr-3 d-inline-block mb-0">{{'home.COUNTDOWN' | translate}}
           <ul class="list-unstyled d-inline-block bg-white p-2 mb-0">
             <li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
             <li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>

src/app/shared/components/header/header.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { ChartService } from '../../services/chart.service';
+import { TransServiceService } from '../../services/trans-service.service';
 
 @Component({
   selector: 'epic-explorer-header',
@@ -12,6 +13,7 @@ export class HeaderComponent implements OnInit {
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private chartService: ChartService,
+    public translate: TransServiceService
   ) {}
 
   ngOnInit() {

src/app/shared/components/search/search.component.html

@@ -1,2 +1,2 @@
-<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input mb-1" (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+<input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input mb-1" (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
 <button (click)="ctrl.value ? onSearch(ctrl.value) : ''" class="btn search_btn"><i class="fa fa-search"></i></button>

src/app/shared/components/search/search.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { TransServiceService } from '../../services/trans-service.service';
 
 @Component({
   selector: 'epic-explorer-search',
@@ -8,7 +9,7 @@ import { Router } from '@angular/router';
 })
 export class SearchComponent implements OnInit {
   search: string = '';
-  constructor(private router: Router) {}
+  constructor(private router: Router,public translate: TransServiceService) {}
 
   ngOnInit() {}
 

src/app/shared/components/siteheader/siteheader.component.html

@@ -21,13 +21,9 @@
             aria-haspopup="true" aria-expanded="false">
             <span class="flag" style="background-image: url('assets/img/uk.jpg')"></span>English
           </a>
-          <div class="dropdown-menu " aria-labelledby="navbarDropdown">
+          <select class="btn btn-outline-primary btn-rounded text-white py-2 ml-2" #langSelect (change)="translate.changeLang(langSelect.value)">
-            <a class="dropdown-item p-2" href="#"><span class="flag"
+            <option *ngFor="let lang of translate.getLanguage()" [value]="lang" [selected]="lang == translate.getCurrentLang()">{{translate.langLabel[lang]}} ({{ lang }})</option>
-                style="background-image: url('assets/img/uk.jpg')"></span>English</a>
+          </select>
-            <a class="dropdown-item p-2" href="#"><span class="flag"
-                style="background-image: url('assets/img/german.jpg')"></span>German</a>
-
-          </div>
         </div>
         <button (click)="ChangeTheme()" class="theme_switch mr-2 btn order-2 order-sm-3"><img
             src="assets/img/dark_theme.png" height="20" class="light_theme_display"><img
@@ -36,7 +32,7 @@
     </div>
     <div class="position-relative d-block d-sm-none w-100 mt-3">
       <input type="text" [(ngModel)]="search" #ctrl="ngModel" class="form-control search_input"
-        (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="Search by hash or height">
+        (keyup.enter)="ctrl.value ? onSearch(ctrl.value) : ''" placeholder="{{'home.SEARCH_TEXT' | translate}}">
       <button class="btn search_btn" (click)="ctrl.value ? onSearch(ctrl.value) : ''">
         <!-- <a href="/blockdetail/{{ ctrl.value }}"  > -->
         <i class="fa fa-search"></i>

src/app/shared/components/siteheader/siteheader.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Router } from '@angular/router';
+import { TransServiceService } from '../../services/trans-service.service';
 
 @Component({
   selector: 'epic-explorer-siteheader',
@@ -13,6 +14,7 @@ export class SiteheaderComponent implements OnInit {
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private router: Router,
+    public translate: TransServiceService
   ) {}
 
   ngOnInit() {}

src/app/shared/shared.module.ts

@@ -8,8 +8,15 @@ import { SearchComponent } from './components/search/search.component';
 import { SiteLayoutComponent } from './components/layouts/site-layout/site-layout.component';
 import { SiteheaderComponent } from './components/siteheader/siteheader.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
+import { CookieService } from 'ngx-cookie-service';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { TransServiceService } from '../shared/services/trans-service.service';
+import { ChartService} from '../shared/services/chart.service';
 
 import { PlotlyComponent } from './components/plotly/plotly.component';
+import { CustomLoader } from '../app.module';
+
 
 const components = [
   HeaderComponent,
@@ -24,6 +31,11 @@ const components = [
 @NgModule({
   declarations: components,
   exports: components,
-  imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, RouterModule, FormsModule, ReactiveFormsModule,
+    TranslateModule.forChild({
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+  })
+  ],
+  providers: [TransServiceService,CookieService,ChartService],
 })
 export class SharedModule {}

src/app/view/block-view/block-detail/block-detail.component.html

@@ -1,8 +1,8 @@
 <div class="view_content py-4">
   <div *ngIf="hasdata" class="container">
 	  <div *ngIf="TimeArr" class="box_shadow_large detail_div p-3 mb-4">
-            <h1 class="test_msg align-middle mb-0 d-inline-block mr-3 pl-3">You are on Testnet</h1>
+            <h1 class="test_msg align-middle mb-0 d-inline-block mr-3 pl-3">{{'home.HEADER_TEXT' | translate}}</h1>
-            <h1 class="test_msg align-middle mb-0 float-right d-inline-block pl-3">Mainnet Countdown
+            <h1 class="test_msg align-middle mb-0 float-right d-inline-block pl-3">{{'home.COUNTDOWN' | translate}}
                 <ul class="list-unstyled d-inline-block  mb-0 txt_primary timer">
                   <li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
                   <li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
@@ -23,7 +23,7 @@
           </div>
           <div class="d-inline-block align-middle ml-2">
             <span class="">Fee</span>
-            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Fee }} Epic</h6>
+            <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Fee }} {{'home.EPIC' | translate}}</h6>
           </div>
         </div>
         <div class="col-sm-6 col-md-4 mt-4">
@@ -49,7 +49,7 @@
             <img src="assets/img/difficulty.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
-            <span class="">Difficulty</span>
+            <span class="">{{'home.DIFFICULTY' | translate}}</span>
             <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.TotalDifficulty }}</h6>
           </div>
         </div>
@@ -58,7 +58,7 @@
             <img src="assets/img/block_reward.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
-            <span class="">Block Reward</span>
+            <span class="">{{'home.BLOCK_REWARD' | translate}}</span>
             <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.BlockReward }} Epic</h6>
           </div>
         </div>
@@ -67,7 +67,7 @@
             <img src="assets/img/age.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
-            <span class="">Age</span>
+            <span class="">{{'home.AGE' | translate}}</span>
             <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.Timestamp }}</h6>
           </div>
         </div>
@@ -76,7 +76,7 @@
             <img src="assets/img/algorithm.png" height="60" />
           </div>
           <div class="d-inline-block align-middle ml-2">
-            <span class="">Pow Algorithm</span>
+            <span class="">{{'home.ALGORITHM' | translate}}</span>
             <h6 class="view_txt">{{ hashdata.BlockchainBlockFetchQuery.PoWAlgorithm }}</h6>
           </div>
         </div>
@@ -100,7 +100,7 @@
                 <div class="view_moble_tble web_hdng">
                     <div class="row">
                         <div class="col-lg-2">
-                         <div class="block_div"><h5 class="mb-0">Commit</h5></div>
+                         <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
                         </div>
 
 
@@ -110,7 +110,7 @@
                   <div class="view_moble_tble" *ngFor="let hashinput of hashdata.BlockchainBlockInputFetchQuery">
                       <div class="row">
                         <div class="col-12">
-                         <div class="block_div"><h6>Commit</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
+                         <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashinput.Data }}</span></div>
                         </div>
 
 
@@ -139,7 +139,7 @@
 
             <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-2" aria-expanded="false"
               aria-controls="collapse-2">
-              <h5 class="mb-0 tab_hdng">Output ({{hashdata?.BlockchainBlockOutputFetchQuery.length ? hashdata.BlockchainBlockOutputFetchQuery.length : 0}}) </h5>
+              <h5 class="mb-0 tab_hdng">{{'home.OUTPUT' | translate}} ({{hashdata?.BlockchainBlockOutputFetchQuery.length ? hashdata.BlockchainBlockOutputFetchQuery.length : 0}}) </h5>
             </a>
 
           </div>
@@ -149,13 +149,13 @@
               <div class="view_moble_tble web_hdng">
                   <div class="row">
                       <div class="col-lg-2">
-                       <div class="block_div"><h5 class="mb-0">Output Type</h5></div>
+                       <div class="block_div"><h5 class="mb-0">{{'home.OUTPUT' | translate}} {{'home.TYPE' | translate}}</h5></div>
                       </div>
                       <div class="col-lg-2 order-3">
-                          <div class="block_div"><h5 class="mb-0">Spent</h5></div>
+                          <div class="block_div"><h5 class="mb-0">{{'home.SPENT' | translate}}</h5></div>
                         </div>
                       <div class="col-lg-8 order-2">
-                        <div class="block_div"><h5 class="mb-0">Commit</h5></div>
+                        <div class="block_div"><h5 class="mb-0">{{'home.COMMIT' | translate}}</h5></div>
                       </div>
 
 
@@ -164,13 +164,13 @@
                 <div class="view_moble_tble"  *ngFor="let hashoutput of hashdata.BlockchainBlockOutputFetchQuery">
                     <div class="row">
                       <div class="col-12 col-sm-4 col-md-4 col-lg-2">
-                       <div class="block_div"><h6>Output Type</h6><span class="blck_value">{{ hashoutput.OutputType }}</span></div>
+                       <div class="block_div"><h6>{{'home.OUTPUT' | translate}} {{'home.TYPE' | translate}}</h6><span class="blck_value">{{ hashoutput.OutputType }}</span></div>
                       </div>
                       <div class="col-12 col-sm-4 col-md-4 col-lg-2 order-lg-3">
-                          <div class="block_div"><h6>Spent</h6><span class="blck_value">{{ hashoutput.Spent }}</span></div>
+                          <div class="block_div"><h6>{{'home.SPENT' | translate}}</h6><span class="blck_value">{{ hashoutput.Spent }}</span></div>
                         </div>
                       <div class="col-12 col-sm-4 col-md-4 col-lg-8 order-lg-2">
-                        <div class="block_div"><h6>Commit</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
+                        <div class="block_div"><h6>{{'home.COMMIT' | translate}}</h6><span class="blck_value">{{ hashoutput.Commit }}</span></div>
                       </div>
 
 
@@ -202,7 +202,7 @@
 
             <a class="collapsed" role="button" data-toggle="collapse" href="#collapse-3" aria-expanded="false"
               aria-controls="collapse-3">
-              <h5 class="mb-0 tab_hdng">Kernals ({{hashdata?.BlockchainBlockKernalFetchQuery.length ? hashdata.BlockchainBlockKernalFetchQuery.length : 0}})</h5>
+              <h5 class="mb-0 tab_hdng">{{'home.KERNELS' | translate}} ({{hashdata?.BlockchainBlockKernalFetchQuery.length ? hashdata.BlockchainBlockKernalFetchQuery.length : 0}})</h5>
             </a>
 
           </div>
@@ -211,13 +211,13 @@
                 <div class="view_moble_tble web_hdng">
                     <div class="row">
                         <div class="col-lg-4">
-                         <div class="block_div"><h5 class="mb-0">Features</h5></div>
+                         <div class="block_div"><h5 class="mb-0">{{'home.FEATURES' | translate}}</h5></div>
                         </div>
                         <div class="col-lg-4 ">
-                          <div class="block_div"><h5 class="mb-0">Lock Height</h5></div>
+                          <div class="block_div"><h5 class="mb-0">{{'home.LOCK' | translate}} {{'home.HEIGHT' | translate}}</h5></div>
                         </div>
                         <div class="col-lg-4 ">
-                            <div class="block_div"><h5 class="mb-0">Fee</h5></div>
+                            <div class="block_div"><h5 class="mb-0">{{'home.FEE' | translate}}</h5></div>
                           </div>
 
                       </div>
@@ -225,14 +225,14 @@
                   <div class="view_moble_tble"  *ngFor="let hashkernel of hashdata.BlockchainBlockKernalFetchQuery">
                       <div class="row">
                         <div class="col-12 col-sm-4 col-md-4 col-lg-4">
-                         <div class="block_div"><h6>Features</h6><span class="blck_value">{{ hashkernel.Features }}</span></div>
+                         <div class="block_div"><h6>{{'home.FEATURES' | translate}}</h6><span class="blck_value">{{ hashkernel.Features }}</span></div>
                         </div>
 
                         <div class="col-12 col-sm-4 col-md-4 col-lg-4">
-                          <div class="block_div"><h6>Lock Height</h6><span class="blck_value">{{ hashkernel.LockHeight }}</span></div>
+                          <div class="block_div"><h6>{{'home.LOCK' | translate}} {{'home.HEIGHT' | translate}}</h6><span class="blck_value">{{ hashkernel.LockHeight }}</span></div>
                         </div>
                         <div class="col-12 col-sm-4 col-md-4 col-lg-4">
-                            <div class="block_div"><h6>Fee</h6><span class="blck_value">{{ hashkernel.Fee }} Epic</span></div>
+                            <div class="block_div"><h6>{{'home.FEE' | translate}}</h6><span class="blck_value">{{ hashkernel.Fee }} Epic</span></div>
                           </div>
 
 
@@ -269,8 +269,8 @@
   <div *ngIf="!hasdata" class="container">
 
     <div class="box_shadow_large bg-white p-3 mb-4 text-center">
-      <h4>Search Results for <span class="txt_primary">"{{params}}"</span></h4>
+      <h4>{{'home.SEARCH_RESULT' | translate}} <span class="txt_primary">"{{params}}"</span></h4>
-      <p>Your search term {{params}} is too short, please enter at least six characters if searching by hash.</p>
+      <p>{{'home.SEARCH_RESULT1' | translate}} {{params}} {{'home.SEARCH_RESULT2' | translate}}, {{'home.SEARCH_RESULT3' | translate}}.</p>
     </div>
   </div>
 </div>

src/app/view/block-view/block-detail/block-detail.component.ts

@@ -5,6 +5,8 @@ import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { BlockDetailListComponent } from '../../home/block-detail-list/block-detail-list.component';
 
+import { TransServiceService } from '../../../shared/services/trans-service.service';
+
 @Component({
   providers: [BlockDetailListComponent],
   selector: 'app-block-detail',
@@ -24,6 +26,7 @@ export class BlockDetailComponent implements OnInit {
     activate_route: ActivatedRoute,
      private titleService: Title,
     private latestcomp: BlockDetailListComponent,
+    public translate: TransServiceService
   ) {
     activate_route.params.subscribe(val => {
       this.params = this.route.snapshot.params.hash;

src/app/view/block-view/block-view.module.ts

@@ -4,8 +4,18 @@ import { BlockViewRoutingModule } from './block-view-routing.module';
 import { BlockViewWorkspaceComponent } from './block-view-workspace.component';
 import { BlockDetailComponent } from './block-detail/block-detail.component';
 
+import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { TransServiceService } from '../../shared/services/trans-service.service';
+import { ChartService} from '../../shared/services/chart.service';
+import { CustomLoader } from 'src/app/app.module';
+
 @NgModule({
   declarations: [BlockViewWorkspaceComponent, BlockDetailComponent],
-  imports: [CommonModule, BlockViewRoutingModule],
+  imports: [CommonModule, BlockViewRoutingModule,
+    TranslateModule.forChild({
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+  })],
+  providers: [TransServiceService,ChartService],
 })
 export class BlockViewModule {}

src/app/view/graph-view/graph-detail/graph-detail.component.html

@@ -8,33 +8,33 @@
               <div class="overflow-hidden">
                 <div class="blocks detail_graph">
 
-            <h2 class="chart_heading text-uppercase d-inline-block">{{this.title}}</h2>
+            <h2 class="chart_heading text-uppercase d-inline-block">{{'home.HEADER_TEXT' | translate}}</h2>
   <epic-explorer-plotly *ngIf="hashdata.data" [data]="hashdata.data" [layout]="hashdata.layout">
   </epic-explorer-plotly>
    <div class="day_filter" *ngIf="this.title!='Transactions by time'">
             <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '1 week', true, false); selectedItem = 1
-              " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 week</a>
+              " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '15 days', true, false); selectedItem = 2
-              " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 days</a>
+              " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '30 days', true, false); selectedItem = 3
-              " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 days</a>
+              " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '60 days', true, false); selectedItem = 4
-              " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 days</a>
+              " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="
             ChartFromView('', '', '3 months', true, false); selectedItem = 5
-              " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 months</a>
+              " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
           </div>
           <div class="day_filter" *ngIf="this.title=='Transactions by time'">
               <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtInput,'Input'); selectedItem8 = 1" id="1" #item1
-              [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">Input</a>
+              [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">{{'home.INPUT' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtKernal,'Kernal'); selectedItem8 = 2" id="2" #item2
-              [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">Kernel</a>
+              [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">{{'home.KERNEL' | translate}}</a>
             <a href="JavaScript:void(0);" (click)="ChartFromView(GraphtDate, GraphtHour, GraphtOutput,'Output'); selectedItem8 = 3" id="3" #item3
-              [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">Output</a>
+              [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">{{'home.OUTPUT' | translate}}</a>
             </div>
 
           </div>
@@ -44,8 +44,8 @@
     </div>
       <div class="col-md-3">
           <div *ngIf="TimeArr" class="box_shadow_large detail_div p-3 mb-4">
-              <h1 class="test_msg align-middle mr-3 pl-3">You are on Testnet</h1>
+              <h1 class="test_msg align-middle mr-3 pl-3">{{'home.HEADER_TEXT' | translate}}</h1>
-              <h1 class="test_msg align-middle mb-0 pl-3">Mainnet Countdown
+              <h1 class="test_msg align-middle mb-0 pl-3">{{'home.COUNTDOWN' | translate}}
                   <ul class="list-unstyled mt-2  mb-0 txt_primary">
                     <li class="d-inline-block"><span id="days">{{TimeArr.d}}d:</span></li>
                     <li class="d-inline-block"><span id="hours">{{TimeArr.h}}h:</span></li>
@@ -55,17 +55,17 @@
               </h1>
           </div>
        <div class="box_shadow_large bg-white p-3">
-        <h2 class="chart_heading mb-2 d-inline-block">Explore</h2>
+        <h2 class="chart_heading mb-2 d-inline-block">{{'home.EXPLORE' | translate}}</h2>
         <ul class="list-unstyled pl-3">
-          <li class="mb-1" *ngIf="this.title!='Total Difficulty'"><a routerLink="/chart/total-difficulty">Total Difficulty</a></li>
+          <li class="mb-1" *ngIf="this.title!='Total Difficulty'"><a routerLink="/chart/total-difficulty">{{'home.TOTAL_DIFFICULTY' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/transactions-by-time">Transactions by time</a></li>
+          <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/transactions-by-time">{{'home.TRANSACTIONS_BY_TIME' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Blocks'"><a routerLink="/chart/blocks">Blocks</a></li>
+          <li class="mb-1" *ngIf="this.title!='Blocks'"><a routerLink="/chart/blocks">{{'home.BLOCKS' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Blocks Mined'"><a routerLink="/chart/blocks-mined">Blocks Mined</a></li>
+          <li class="mb-1" *ngIf="this.title!='Blocks Mined'"><a routerLink="/chart/blocks-mined">{{'home.BLOCKS_MINED' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Transaction Fees'"><a routerLink="/chart/transaction-fees">Transaction Fees</a></li>
+          <li class="mb-1" *ngIf="this.title!='Transaction Fees'"><a routerLink="/chart/transaction-fees">{{'home.TRANSACTION_FEES' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Supply Growth'"><a routerLink="/chart/supply-growth">Supply Growth</a></li>
+          <li class="mb-1" *ngIf="this.title!='Supply Growth'"><a routerLink="/chart/supply-growth">{{'home.SUPPLY_GROWTH' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">HashRate Growth Chart</a></li>
+          <li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">{{'home.HASHRATE_GROWTH_CHART' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">Block Interval</a></li>
+          <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li>
-          <li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">Transactions Vs Date</a></li>
+          <li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li>
         </ul>
        </div>
       </div>

src/app/view/graph-view/graph-detail/graph-detail.component.ts

@@ -5,6 +5,10 @@ import { ActivatedRoute } from '@angular/router';
 import { GraphListComponent } from '../../home/graph-list/graph-list.component';
 import { Title } from '@angular/platform-browser';
 
+import { TransServiceService } from '../../../shared/services/trans-service.service';
+
+
+
 @Component({
   providers: [GraphListComponent],
   selector: 'app-graph-detail',
@@ -12,6 +16,7 @@ import { Title } from '@angular/platform-browser';
   styleUrls: ['./graph-detail.component.css'],
 })
 export class GraphDetailComponent implements OnInit {
+
   TimeArr: any;
   public hashdata: any = [];
   public title: any;
@@ -30,6 +35,7 @@ export class GraphDetailComponent implements OnInit {
     private chartService: ChartService,
     private comp: GraphListComponent,
     private titleService: Title,
+    public translate: TransServiceService
   ) {}
   ngOnInit() {
     var self = this;

src/app/view/graph-view/graph-view.module.ts

@@ -5,9 +5,23 @@ import { GraphViewWorkspaceComponent } from './graph-view-workspace.component';
 import { GraphDetailComponent } from './graph-detail/graph-detail.component';
 import { HomeModule } from '../home/home.module';
 import { SharedModule } from '../../shared/shared.module';
+
+import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
+import { CookieService } from 'ngx-cookie-service';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { TransServiceService } from '../../shared/services/trans-service.service';
+import { ChartService} from '../../shared/services/chart.service';
+import { CustomLoader } from 'src/app/app.module';
+
+
+
 @NgModule({
   declarations: [GraphViewWorkspaceComponent, GraphDetailComponent],
-  imports: [CommonModule, GraphViewRoutingModule, HomeModule,SharedModule
+  imports: [CommonModule, GraphViewRoutingModule, HomeModule,SharedModule,
+    TranslateModule.forChild({
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+  })
   ],
+  providers: [TransServiceService,CookieService,ChartService],
 })
 export class GraphViewModule {}

src/app/view/home/block-detail-list/block-detail-list.component.html

@@ -28,25 +28,25 @@
   <div class="col-md-3">
     <div class="text-center detail_div">
       <p class="count mb-0">{{ latestblockdetail.block_height | number }}</p>
-      <p class="mb-0 desc">Blockchain Height</p>
+      <p class="mb-0 desc">{{'home.BLOCKCHAIN_HEIGHT' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
     <div class="text-center detail_div">
       <p class="count mb-0">{{latestblockdetail.letest_block_num}} <span class="">{{latestblockdetail.letest_block_duration}}</span></p>
-      <p class="mb-0 desc">Latest Block</p>
+      <p class="mb-0 desc">{{'home.LATEST_BLOCK' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
     <div class="text-center detail_div">
       <p class="count mb-0">{{latestblockdetail.difficulty | number}} / {{latestblockdetail.targetdifficulty | number}}</p>
-      <p class="mb-0 desc">Latest Block Difficulty</p>
+      <p class="mb-0 desc">{{'home.LATEST_BLOCK1' | translate}}</p>
     </div>
   </div>
   <div class="col-md-3">
     <div class="text-center detail_div">
       <p class="count mb-0">{{latestblockdetail.coin_existence | number}} <span class="">Epic</span></p>
-      <p class="mb-0 desc">Coins in Existence</p>
+      <p class="mb-0 desc">{{'home.COIN_IN' | translate}}</p>
     </div>
   </div>
 </div>

src/app/view/home/block-detail-list/block-detail-list.component.ts

@@ -4,6 +4,7 @@ import { HttpParams } from '@angular/common/http';
 import * as io from 'socket.io-client';
 import { environment } from '../../../../environments/environment';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { TransServiceService } from '../../../shared/services/trans-service.service';
 
 @Component({
   selector: 'app-block-detail-list',
@@ -17,7 +18,7 @@ export class BlockDetailListComponent implements OnInit {
   private server = environment.domain;
   private socket;
   
-  constructor(private chartService: ChartService) {
+  constructor(private chartService: ChartService,public translate: TransServiceService) {
     this.chartService.createSocketConnection();
   }
   

src/app/view/home/graph-list/graph-list.component.html

@@ -2,7 +2,7 @@
   <div class="col-md-6 col-lg-4 mb-4">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">Total Difficulty</h2>
+        <h2 class="chart_heading d-inline-block">{{'home.TOTAL_DIFFICULTY' | translate}}</h2>
         <span class="txn_count" *ngIf="this.lg_last">{{
           this.lg_last | number
         }}</span>
@@ -26,22 +26,22 @@
       <div class="day_filter">
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '1 week', true, false); selectedItem = 1
-          " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 week</a>
+          " id="1" #item1 [ngClass]="{ active: selectedItem == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '15 days', true, false); selectedItem = 2
-          " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 days</a>
+          " id="2" #item2 [ngClass]="{ active: selectedItem == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '30 days', true, false); selectedItem = 3
-          " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 days</a>
+          " id="3" #item3 [ngClass]="{ active: selectedItem == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '60 days', true, false); selectedItem = 4
-          " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 days</a>
+          " id="4" #item4 [ngClass]="{ active: selectedItem == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '3 months', true, false); selectedItem = 5
-          " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 months</a>
+          " id="5" #item5 [ngClass]="{ active: selectedItem == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
       </div>
       <div class="explore_all text-right">
-        <a routerLink="/chart/total-difficulty"><span class="text-uppercase d-block">explore it <i
+        <a routerLink="/chart/total-difficulty"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
           class="fa fa-long-arrow-right"></i></span></a>
       </div>
     </div>
@@ -49,7 +49,7 @@
   <div class="col-md-6 col-lg-4 mb-4">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">Transactions By Time</h2>
+        <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_BY_TIME' | translate}}</h2>
         <div class="chart_show heatmapshow">
           <epic-explorer-plotly *ngIf="heatMapGrowthData.data" [data]="heatMapGrowthData.data"
             [layout]="heatMapGrowthData.layout"></epic-explorer-plotly>
@@ -71,14 +71,14 @@
 
     <div class="day_filter">
       <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tInput,'Input'); selectedItem8 = 1" id="1" #item1
-        [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">Input</a>
+        [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">{{'home.INPUT' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tKernal,'Kernal'); selectedItem8 = 2" id="2" #item2
-        [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">Kernel</a>
+        [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">{{'home.KERNELS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="transactionheatmapFunc(tDate, tHour, tOutput,'Output'); selectedItem8 = 3" id="3" #item3
-        [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">Output</a>
+        [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">{{'home.OUTPUT' | translate}}</a>
     </div>
     <div class="explore_all text-right">
-      <a routerLink="/chart/transactions-by-time"><span class="text-uppercase d-block">explore it <i
+      <a routerLink="/chart/transactions-by-time"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
             class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
@@ -86,7 +86,7 @@
 <div class="col-md-6 col-lg-4 mb-4">
   <div class="box_shadow">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">Blocks</h2>
+      <h2 class="chart_heading d-inline-block">{{'home.BLOCKS' | translate}}</h2>
       <span class="txn_count" *ngIf="this.brg_last">{{
           this.brg_last | number
         }}</span>
@@ -109,22 +109,22 @@
     <div class="day_filter">
       <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '1 week', false, true); selectedItem3 = 1
-          " id="1" #item31 [ngClass]="{ active: selectedItem3 == item1.id, txt_primay: true }">1 week</a>
+          " id="1" #item31 [ngClass]="{ active: selectedItem3 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '15 days', false, true); selectedItem3 = 2
-          " id="2" #item32 [ngClass]="{ active: selectedItem3 == item2.id, day15_txt: true }">15 days</a>
+          " id="2" #item32 [ngClass]="{ active: selectedItem3 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '30 days', false, true); selectedItem3 = 3
-          " id="3" #item33 [ngClass]="{ active: selectedItem3 == item3.id, day30_txt: true }">30 days</a>
+          " id="3" #item33 [ngClass]="{ active: selectedItem3 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '60 days', false, true); selectedItem3 = 4
-          " id="4" #item34 [ngClass]="{ active: selectedItem3 == item4.id, day60_txt: true }">60 days</a>
+          " id="4" #item34 [ngClass]="{ active: selectedItem3 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="
             Difficultyreq('', '', '3 months', false, true); selectedItem3 = 5
-          " id="5" #item35 [ngClass]="{ active: selectedItem3 == item5.id, day3m_txt: true }">3 months</a>
+          " id="5" #item35 [ngClass]="{ active: selectedItem3 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
     </div>
     <div class="explore_all text-right">
-      <a routerLink="/chart/blocks"><span class="text-uppercase d-block">explore it <i class="fa fa-long-arrow-right"></i></span></a>
+      <a routerLink="/chart/blocks"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
 </div>
@@ -134,7 +134,7 @@
 <div class="col-md-6 col-lg-4 mb-4">
   <div class="box_shadow">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">Transactions Fee</h2>
+      <h2 class="chart_heading d-inline-block">{{'home.TRANSACTION_FEES' | translate}}</h2>
       <span class="txn_count" *ngIf="this.fg_last">{{this.fg_last |number}}</span>
 
       <div class="chart_show">
@@ -158,25 +158,25 @@
 
 <div class="day_filter">
   <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '1 week'); selectedItem4 = 1" id="1" #item1
-    [ngClass]="{ active: selectedItem4 == item1.id, txt_primay: true }">1 week</a>
+    [ngClass]="{ active: selectedItem4 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
   <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '15 days'); selectedItem4 = 2" id="2" #item2
-    [ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 days</a>
+    [ngClass]="{ active: selectedItem4 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
   <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '30 days'); selectedItem4 = 3" id="3" #item3
-    [ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 days</a>
+    [ngClass]="{ active: selectedItem4 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
   <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '60 days'); selectedItem4 = 4" id="4" #item4
-    [ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 days</a>
+    [ngClass]="{ active: selectedItem4 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
   <a href="JavaScript:void(0);" (click)="Transcationreq('', '', '3 months'); selectedItem4 = 5" id="5" #item5
-    [ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 months</a>
+    [ngClass]="{ active: selectedItem4 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
 </div>
 <div class="explore_all text-right">
-  <a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">explore it <i class="fa fa-long-arrow-right"></i></span></a>
+  <a routerLink="/chart/transaction-fees"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i class="fa fa-long-arrow-right"></i></span></a>
 </div>
 </div>
 </div>
 <div class="col-md-6 col-lg-4 mb-4">
   <div class="box_shadow">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">Supply Growth</h2>
+      <h2 class="chart_heading d-inline-block">{{'home.SUPPLY_GROWTH' | translate}}</h2>
       <span class="txn_count" *ngIf="this.gg_last">{{
           this.gg_last | number
         }}</span>
@@ -199,18 +199,18 @@
     </div>
     <div class="day_filter">
       <a href="JavaScript:void(0);" (click)="Growthreq('', '', '1 week'); selectedItem5 = 1" id="1" #item1
-        [ngClass]="{ active: selectedItem5 == item1.id, txt_primay: true }">1 week</a>
+        [ngClass]="{ active: selectedItem5 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Growthreq('', '', '15 days'); selectedItem5 = 2" id="2" #item2
-        [ngClass]="{ active: selectedItem5 == item2.id, day15_txt: true }">15 days</a>
+        [ngClass]="{ active: selectedItem5 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Growthreq('', '', '30 days'); selectedItem5 = 3" id="3" #item3
-        [ngClass]="{ active: selectedItem5 == item3.id, day30_txt: true }">30 days</a>
+        [ngClass]="{ active: selectedItem5 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Growthreq('', '', '60 days'); selectedItem5 = 4" id="4" #item4
-        [ngClass]="{ active: selectedItem5 == item4.id, day60_txt: true }">60 days</a>
+        [ngClass]="{ active: selectedItem5 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Growthreq('', '', '3 months'); selectedItem5 = 5" id="5" #item5
-        [ngClass]="{ active: selectedItem5 == item5.id, day3m_txt: true }">3 months</a>
+        [ngClass]="{ active: selectedItem5 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
     </div>
     <div class="explore_all text-right">
-      <a  routerLink="/chart/supply-growth"><span class="text-uppercase d-block">explore it <i
+      <a  routerLink="/chart/supply-growth"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
             class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
@@ -218,7 +218,7 @@
 <div class="col-md-6 col-lg-4 mb-4">
   <div class="box_shadow">
     <div class="blocks">
-      <h2 class="chart_heading d-inline-block">Blocks Mined</h2>
+      <h2 class="chart_heading d-inline-block">{{'home.BLOCKS_MINED' | translate}}</h2>
       <span class="txn_count" *ngIf="this.dg_last">{{
           this.dg_last | number
         }}</span>
@@ -243,18 +243,18 @@
     </div>
     <div class="day_filter">
       <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '1 week'); selectedItem7 = 1" id="1" #item1
-        [ngClass]="{ active: selectedItem7 == item1.id, txt_primay: true }">1 week</a>
+        [ngClass]="{ active: selectedItem7 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '15 days'); selectedItem7 = 2" id="2" #item2
-        [ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 days</a>
+        [ngClass]="{ active: selectedItem7 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '30 days'); selectedItem7 = 3" id="3" #item3
-        [ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 days</a>
+        [ngClass]="{ active: selectedItem7 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '60 days'); selectedItem7 = 4" id="4" #item4
-        [ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 days</a>
+        [ngClass]="{ active: selectedItem7 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
       <a href="JavaScript:void(0);" (click)="Blockminedreq('', '', '3 months'); selectedItem7 = 5" id="5" #item5
-        [ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 months</a>
+        [ngClass]="{ active: selectedItem7 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
     </div>
     <div class="explore_all text-right">
-       <a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">explore it <i
+       <a routerLink="/chart/blocks-mined"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
             class="fa fa-long-arrow-right"></i></span></a>
     </div>
   </div>
@@ -264,7 +264,7 @@
   <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">HashRate Growth Chart</h2>
+        <h2 class="chart_heading d-inline-block">{{'home.HASHRATE_GROWTH_CHART' | translate}}</h2>
         <span class="txn_count" *ngIf="this.hg_last">{{
           this.hg_last | number
         }}</span>
@@ -287,18 +287,18 @@
       </div>
       <div class="day_filter">
           <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '1 week'); selectedItem9 = 1" id="1" #item1
-          [ngClass]="{ active: selectedItem9 == item1.id, txt_primay: true }">1 week</a>
+          [ngClass]="{ active: selectedItem9 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '15 days'); selectedItem9 = 2" id="2" #item2
-          [ngClass]="{ active: selectedItem9 == item2.id, day15_txt: true }">15 days</a>
+          [ngClass]="{ active: selectedItem9 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '30 days'); selectedItem9 = 3" id="3" #item3
-          [ngClass]="{ active: selectedItem9 == item3.id, day30_txt: true }">30 days</a>
+          [ngClass]="{ active: selectedItem9 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '60 days'); selectedItem9 = 4" id="4" #item4
-          [ngClass]="{ active: selectedItem9 == item4.id, day60_txt: true }">60 days</a>
+          [ngClass]="{ active: selectedItem9 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Transactiondoublelinechartreq('', '', '3 months'); selectedItem9 = 5" id="5" #item5
-          [ngClass]="{ active: selectedItem9 == item5.id, day3m_txt: true }">3 months</a>
+          [ngClass]="{ active: selectedItem9 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
       </div>
       <div class="explore_all text-right">
-        <a routerLink="/chart/hashrate-growth-chart"><span class="text-uppercase d-block">explore it <i
+        <a routerLink="/chart/hashrate-growth-chart"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
               class="fa fa-long-arrow-right"></i></span></a>
       </div>
     </div>
@@ -306,7 +306,7 @@
   <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">Block Interval</h2>
+        <h2 class="chart_heading d-inline-block">{{'home.BLOCK_INTERVAL' | translate}}</h2>
         <span class="txn_count" *ngIf="this.ag_last">{{ this.ag_last | number }} sec</span>
 
         <div class="chart_show">
@@ -328,18 +328,18 @@
       </div>
       <div class="day_filter">
         <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '1 week'); selectedItem2 = 1" id="1" #item1
-          [ngClass]="{ active: selectedItem2 == item1.id, txt_primay: true }">1 week</a>
+          [ngClass]="{ active: selectedItem2 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '15 days'); selectedItem2 = 2" id="2" #item2
-          [ngClass]="{ active: selectedItem2 == item2.id, day15_txt: true }">15 days</a>
+          [ngClass]="{ active: selectedItem2 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '30 days'); selectedItem2 = 3" id="3" #item3
-          [ngClass]="{ active: selectedItem2 == item3.id, day30_txt: true }">30 days</a>
+          [ngClass]="{ active: selectedItem2 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '60 days'); selectedItem2 = 4" id="4" #item4
-          [ngClass]="{ active: selectedItem2 == item4.id, day60_txt: true }">60 days</a>
+          [ngClass]="{ active: selectedItem2 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="Blockspersecreq('', '', '3 months'); selectedItem2 = 5" id="5" #item5
-          [ngClass]="{ active: selectedItem2 == item5.id, day3m_txt: true }">3 months</a>
+          [ngClass]="{ active: selectedItem2 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
       </div>
       <div class="explore_all text-right">
-        <a routerLink="/chart/block-interval"><span class="text-uppercase d-block">explore it <i
+        <a routerLink="/chart/block-interval"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
               class="fa fa-long-arrow-right"></i></span></a>
       </div>
     </div>
@@ -347,7 +347,7 @@
   <div [ngClass]="{'col-md-6 col-lg-4 mb-4' : true, 'd-none' : viewchart}">
     <div class="box_shadow">
       <div class="blocks">
-        <h2 class="chart_heading d-inline-block">Transactions vs Date</h2>
+        <h2 class="chart_heading d-inline-block">{{'home.TRANSACTIONS_VS_DATE' | translate}}</h2>
         <span class="txn_count" *ngIf="this.tg_last">{{
           this.tg_last | number
         }}</span>
@@ -371,22 +371,22 @@
       </div>
       <div class="day_filter">
         <a href="JavaScript:void(0);" (click)="Transactionlinechartreq('', '', '1 week'); selectedItem8 = 1" id="1"
-          #item1 [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">1 week</a>
+          #item1 [ngClass]="{ active: selectedItem8 == item1.id, txt_primay: true }">1 {{'home.WEEK' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Transactionlinechartreq('', '', '15 days'); selectedItem8 = 2
-          " id="2" #item2 [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">15 days</a>
+          " id="2" #item2 [ngClass]="{ active: selectedItem8 == item2.id, day15_txt: true }">15 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Transactionlinechartreq('', '', '30 days'); selectedItem8 = 3
-          " id="3" #item3 [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">30 days</a>
+          " id="3" #item3 [ngClass]="{ active: selectedItem8 == item3.id, day30_txt: true }">30 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Transactionlinechartreq('', '', '60 days'); selectedItem8 = 4
-          " id="4" #item4 [ngClass]="{ active: selectedItem8 == item4.id, day60_txt: true }">60 days</a>
+          " id="4" #item4 [ngClass]="{ active: selectedItem8 == item4.id, day60_txt: true }">60 {{'home.DAYS' | translate}}</a>
         <a href="JavaScript:void(0);" (click)="
             Transactionlinechartreq('', '', '3 months'); selectedItem8 = 5
-          " id="5" #item5 [ngClass]="{ active: selectedItem8 == item5.id, day3m_txt: true }">3 months</a>
+          " id="5" #item5 [ngClass]="{ active: selectedItem8 == item5.id, day3m_txt: true }">3 {{'home.MONTHS' | translate}}</a>
       </div>
       <div class="explore_all text-right">
-        <a routerLink="/chart/transactions-vs-date"><span class="text-uppercase d-block">explore it <i
+        <a routerLink="/chart/transactions-vs-date"><span class="text-uppercase d-block">{{'home.EXPLORE_IT' | translate}} <i
               class="fa fa-long-arrow-right"></i></span></a>
       </div>
     </div>

src/app/view/home/graph-list/graph-list.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { ChartService } from '../../../shared/services/chart.service';
 import { HttpClient, HttpParams } from '@angular/common/http';
+import { TransServiceService } from '../../../shared/services/trans-service.service';
 
 @Component({
   selector: 'epic-explorer-graph-list',
@@ -47,7 +48,7 @@ export class GraphListComponent implements OnInit {
   public tDate: any;
   public tHour: any;
 
-  constructor(private chartService: ChartService, private http: HttpClient) {}
+  constructor(private chartService: ChartService, private http: HttpClient,public translate: TransServiceService) {}
 
   ngOnInit() {
     /* Total Difficulty and blocks chart fetching */

src/app/view/home/home.module.ts

@@ -7,6 +7,15 @@ import { GraphListComponent } from './graph-list/graph-list.component';
 import { BlockDetailListComponent } from './block-detail-list/block-detail-list.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from '../../shared/shared.module';
+
+import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
+import { CookieService } from 'ngx-cookie-service';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { TransServiceService } from '../../shared/services/trans-service.service';
+import { ChartService} from '../../shared/services/chart.service';
+import { CustomLoader } from 'src/app/app.module';
+
+
 @NgModule({
   declarations: [
     HomeWorksapceComponent,
@@ -19,7 +28,11 @@ import { SharedModule } from '../../shared/shared.module';
     HomeRoutingModule,
     FormsModule,
     ReactiveFormsModule,
-    SharedModule
+    SharedModule,
+    TranslateModule.forChild({
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+  })
   ],
+  providers: [TransServiceService,CookieService,ChartService],
 })
 export class HomeModule {}

src/app/view/home/latestblocks/latestblocks.component.html

@@ -1,31 +1,31 @@
 <div class="latest_table">
-  <h2 class="mb-3 chart_heading px-0">Latest Blocks</h2>
+  <h2 class="mb-3 chart_heading px-0">{{'home.LATEST_BLOCK' | translate}}</h2>
   <div class="mobile_table web_hdng">
      
       <div class="row">
         <div class="col-6 col-md-4 tble_col">
-         <div class="block_div"> <h5 class="mb-0">Height</h5></div>
+         <div class="block_div"> <h5 class="mb-0">{{'home.HEIGHT' | translate}}</h5></div>
         </div>
         <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">Hash</h5></div>
+          <div class="block_div"><h5 class="mb-0">{{'home.HASH' | translate}}</h5></div>
         </div>
         <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0" >Age</h5></div>
+          <div class="block_div"><h5 class="mb-0" >{{'home.AGE' | translate}}</h5></div>
         </div>
         <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">Difficulty</h5></div>
+          <div class="block_div"><h5 class="mb-0">{{'home.DIFFICULTY' | translate}}</h5></div>
         </div>
         <div class="col-7 col-sm-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">Pow Algo</h5></div>
+          <div class="block_div"><h5 class="mb-0">{{'home.POW_ALGO' | translate}}</h5></div>
         </div>
         <div class="col-5 col-sm-6 col-md-4 tble_col">
-          <div class="block_div"><h5 class="mb-0">#Inputs</h5></div>
+          <div class="block_div"><h5 class="mb-0">#{{'home.INPUTS' | translate}}</h5></div>
         </div>
         <div class="col-6 col-md-4 tble_col">
-          <div class="block_div"><h5  class="mb-0">#Outputs</h5></div>
+          <div class="block_div"><h5  class="mb-0">#{{'home.OUTPUTS' | translate}}</h5></div>
         </div>
         <div class="col-6 col-md-4 tble_col">
-          <div class="block_div" ><h5 class="mb-0">#Kernels</h5></div>
+          <div class="block_div" ><h5 class="mb-0">#{{'home.KERNALS' | translate}}</h5></div>
         </div>
       </div>
     </div>
@@ -34,7 +34,7 @@
     <div class="row">
       <div class="col-6 col-md-3 tble_col">
        <div class="block_div">  <span *ngIf="item.id != clickValue" (click)="onClickPlus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-plus"></i></span>
-        <span  *ngIf="item.id == clickValue" (click)="onClickMinus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-minus"></i></span><h6>Height</h6><span class="blck_value link_to_detail" routerLink="/blockdetail/{{ hashvalue.blockchain_block_height }}">{{ hashvalue.blockchain_block_height }}</span></div>
+        <span  *ngIf="item.id == clickValue" (click)="onClickMinus(hashvalue.blockchain_block_height);" class="expnd_blck"><i class="fa fa-minus"></i></span><h6>{{'home.HEIGHT' | translate}}</h6><span class="blck_value link_to_detail" routerLink="/blockdetail/{{ hashvalue.blockchain_block_height }}">{{ hashvalue.blockchain_block_height }}</span></div>
       </div>
       <div class="col-6 col-md-3 tble_col">
         <div [title]="hashvalue.blockchain_block_hash" routerLink="/blockdetail/{{ hashvalue.blockchain_block_hash }}" class="block_div"><h6>Hash</h6><span class="blck_value">{{ hashvalue.hashstart
@@ -55,13 +55,13 @@
         <div class="block_div"><h6 class="mb-0">Pow Algo</h6><span class="blck_value">{{ hashvalue.PoWAlgo }}</span></div>
       </div>
       <div class="col-6 col-sm-6 col-md-3 tble_col">
-        <div class="block_div"><h6>#Inputs</h6><span class="blck_value">{{ hashvalue.input_count }}</span></div>
+        <div class="block_div"><h6>#{{'home.INPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.input_count }}</span></div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div"><h6 >#Outputs</h6><span class="blck_value">{{ hashvalue.output_count }}</span></div>
+        <div class="block_div"><h6 >#{{'home.OUTPUTS' | translate}}</h6><span class="blck_value">{{ hashvalue.output_count }}</span></div>
       </div>
       <div class="col-6 col-md-3 tble_col">
-        <div class="block_div" ><h6>#Kernels</h6><span class="blck_value">{{ hashvalue.kernal_count }}</span></div>
+        <div class="block_div" ><h6>#{{'home.KERNELS' | translate}}</h6><span class="blck_value">{{ hashvalue.kernal_count }}</span></div>
       </div>
       <!-- <div class="col-6 col-md-4">
           <a class="txt_secondary" href="JavaScript:Void(0);"

src/app/view/home/latestblocks/latestblocks.component.ts

@@ -3,6 +3,8 @@ import { HttpParams } from '@angular/common/http';
 import { ChartService } from '../../../shared/services/chart.service';
 import { FormGroup, FormControl } from '@angular/forms';
 
+import { TransServiceService } from '../../../shared/services/trans-service.service';
+
 @Component({
   selector: 'epic-explorer-latestblocks',
   templateUrl: './latestblocks.component.html',
@@ -18,7 +20,7 @@ export class LatestblocksComponent implements OnInit {
     pagesize: new FormControl(20),
   });
 
-  constructor(private chartService: ChartService) {}
+  constructor(private chartService: ChartService,public translate: TransServiceService) {}
 
   ngOnInit() {
     this.gettinghashList(1, 20);

src/app/view/home/not-found/not-found.component.html

@@ -4,9 +4,9 @@
           <div class="text-center">
             
             <h1 class="w-100 txt_primary not_txt">4<img src="assets/img/404.png" height="100">4 </h1>
-            <h1>Page Not Found</h1>
+            <h1>{{'home.NOT_FOUND' | translate}}</h1>
-            <p class="w-100">Page you are looking for is not found</p>
+            <p class="w-100">{{'home.NOT_FOUND1' | translate}}</p>
-            <button class="btn btn_primary">Go to Explorer</button>
+            <button class="btn btn_primary">{{'home.NOT_FOUND2' | translate}}</button>
           </div>
         </div>
         </div>

src/app/view/home/not-found/not-found.component.ts

@@ -1,13 +1,15 @@
 import { Component, OnInit, AfterViewInit } from '@angular/core';
 import { Utils } from 'src/app/shared/utils';
 
+import { TransServiceService } from '../../../shared/services/trans-service.service';
+
 @Component({
   selector: 'app-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.css'],
 })
 export class NotFoundComponent extends Utils implements OnInit, AfterViewInit {
-  constructor() {
+  constructor(public translate: TransServiceService) {
     super(document);
   }
 

src/app/view/view.module.ts

@@ -3,8 +3,21 @@ import { CommonModule } from '@angular/common';
 import { ViewRoutingModule } from './view-routing.module';
 import { SharedModule } from '../shared/shared.module';
 
+import { HttpClientModule, HttpClient, HttpParams } from '@angular/common/http';
+import { CookieService } from 'ngx-cookie-service';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import { TransServiceService } from '../shared/services/trans-service.service';
+import { ChartService} from '../shared/services/chart.service';
+import { CustomLoader } from '../app.module';
+
+
 @NgModule({
   declarations: [],
-  imports: [CommonModule, ViewRoutingModule, SharedModule],
+  imports: [CommonModule, ViewRoutingModule, SharedModule,
+    TranslateModule.forChild({
+      loader: {provide: TranslateLoader, useClass: CustomLoader, deps : [HttpClient]},         
+  })
+  ],
+  providers: [TransServiceService,CookieService,ChartService],
 })
 export class ViewModule {}