Translating app component content

src/app/app.component.html

@@ -1,9 +1,11 @@
-<h3>DSpace</h3>
+<h3>{{ 'title' | translate }}</h3>
 <nav>
-  <a routerLinkActive="router-link-active" routerLink="home">Home</a>
+  <a routerLinkActive="router-link-active" routerLink="home">{{ 'nav.home' | translate }}</a>
 </nav>
 <div class="container-fluid">
   <main>
+    <p>{{ 'example.with.data' | translate:data }}</p>
+    <p>{{ example }}</p>
     <router-outlet></router-outlet>
   </main>
 </div>

src/app/app.component.ts

@@ -1,4 +1,6 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Component, ChangeDetectionStrategy, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { TranslateService } from 'ng2-translate';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
@@ -7,5 +9,26 @@ import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
+
+  example: string;
+
+  data: any = {
+    greeting: 'Hello',
+    recipient: 'World'
+  }
+
+  constructor(public translate: TranslateService) {
+    // this language will be used as a fallback when a translation isn't found in the current language
+    translate.setDefaultLang('en');
+    // the lang to use, if the lang isn't available, it will use the current loader to get them
+    translate.use('en');
+  }
+
+  ngOnInit() {
+    this.translate.get('example.with.data', { greeting: 'Hello', recipient: 'DSpace' }).subscribe((res: string) => {
+      this.example = res;
+    });
+  }
+
 }