feat(angular library): added angular example library

package.json

@@ -49,6 +49,7 @@
     "@types/jasminewd2": "2.0.3",
     "@types/node": "8.5.2",
     "angular-cli-ghpages": "0.5.2",
+    "angular-example-library": "1.1.2",
     "codelyzer": "4.0.2",
     "coveralls": "3.0.0",
     "hammerjs": "2.0.8",
@@ -61,6 +62,7 @@
     "karma-jasmine": "1.1.1",
     "karma-jasmine-html-reporter": "0.2.2",
     "karma-remap-istanbul": "0.6.0",
+    "moment": "2.20.1",
     "protractor": "5.2.2",
     "source-map-explorer": "1.5.0",
     "standard-version": "4.2.0",

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
 import {ProgressBarService} from './core/progress-bar.service';
 import {ProgressInterceptor} from './shared/interceptors/progress.interceptor';
 import {TimingInterceptor} from './shared/interceptors/timing.interceptor';
+import {SampleModule} from 'angular-example-library';
 
 @NgModule({
   imports: [
@@ -32,6 +33,11 @@ import {TimingInterceptor} from './shared/interceptors/timing.interceptor';
       }
     }),
     SharedModule.forRoot(),
+    SampleModule.forRoot({
+      config: {
+        say: 'hello'
+      }
+    }),
     CoreModule,
     AppRoutingModule
   ],

src/app/core/core.module.ts

@@ -12,15 +12,16 @@ import {RouterModule} from '@angular/router';
 import {SearchBarComponent} from './search-bar/search-bar.component';
 import {Error404Component} from './error404/error-404.component';
 import {ProgressBarService} from './progress-bar.service';
-
+import {SampleModule} from 'angular-example-library';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     RouterModule,
     SharedModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    SampleModule
   ],
   exports: [
     NavComponent,

src/app/core/footer/footer.component.html

@@ -1,9 +1,12 @@
 <footer>
     <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center"
          class.xs="footer-xs">
-        <div fxFlex="80">
+        <div fxFlex="33">
             <span>{{ 'angularExampleApp' | translate }} 2017</span>
         </div>
+        <div fxFlex="33" class="text-center">
+            <sample-component [locale]="currentLang"></sample-component>
+        </div>
         <div fxFlex class="text-right" class.xs="footer-xs">
             <a href="https://angular.io/" target="_blank"><img src="assets/images/angular.svg"></a>
         </div>

src/app/core/footer/footer.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'app-footer',
@@ -7,4 +8,9 @@ import {Component} from '@angular/core';
 })
 
 export class FooterComponent {
+  currentLang: string;
+
+  constructor(private translateService: TranslateService) {
+    this.currentLang = this.translateService.currentLang;
+  }
 }

src/app/core/nav/nav.component.html

@@ -1,11 +1,14 @@
 <header>
     <nav>
         <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center">
-            <div fxFlex="50">
+            <div fxFlex="40">
                 <a mat-raised-button *ngFor="let item of menuItems" routerLink="{{item.link}}">
                     {{item.name | uppercase}}
                 </a>
             </div>
+            <div fxFlex="20" id="today">
+                <sample-component [locale]="currentLang"></sample-component>
+            </div>
             <div fxFlex class="text-right">
                 <app-search-bar></app-search-bar>
                 <button mat-icon-button [matMenuTriggerFor]="matmenu">

src/app/core/nav/nav.component.scss

@@ -37,10 +37,20 @@
       img {
         vertical-align: middle;
       }
+
+      #today {
+        font-size: 0.7em;
+      }
     }
   }
 }
 
+@media (max-width: 807px) {
+  #today {
+    width: 50%;
+  }
+}
+
 @media (max-width: 680px) {
   :host(app-nav) {
     padding-top: 0;
@@ -53,6 +63,14 @@
         height: 7em;
         display: flex;
         padding: 1em 2em 0;
+
+        > div {
+          margin-top: 1em;
+        }
+
+        #today {
+          margin-top: 1em;
+        }
       }
     }
   }

src/app/core/nav/nav.component.ts

@@ -15,15 +15,14 @@ export class NavComponent {
   appConfig: any;
   menuItems: any[];
   progressBarMode: string;
-
-  private translateService: TranslateService;
+  currentLang: string;
 
   constructor(@Inject(APP_CONFIG) appConfig: IAppConfig,
               private progressBarService: ProgressBarService,
-              translateService: TranslateService) {
+              private translateService: TranslateService) {
     this.appConfig = appConfig;
-    this.translateService = translateService;
     this.loadMenus();
+    this.currentLang = this.translateService.currentLang;
 
     this.progressBarService.updateProgressBar$.subscribe((mode: string) => {
       this.progressBarMode = mode;

src/app/shared/modules/shared.module.ts

@@ -3,17 +3,20 @@ import {MaterialModule} from './material.module';
 import {TranslateModule} from '@ngx-translate/core';
 import {HeroService} from '../../heroes/shared/hero.service';
 import {FlexLayoutModule} from '@angular/flex-layout';
+import {SampleModule} from 'angular-example-library';
 
 @NgModule({
   imports: [
     MaterialModule,
     FlexLayoutModule,
-    TranslateModule
+    TranslateModule,
+    SampleModule
   ],
   exports: [
     MaterialModule,
     FlexLayoutModule,
-    TranslateModule
+    TranslateModule,
+    SampleModule
   ]
 })
 

src/assets/css/styles.scss

@@ -80,6 +80,10 @@ snack-bar-container {
   width: 55px !important;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .text-right {
   text-align: right;
 }